webpack插件plugin 添加版权 打包html js压缩

@TOC

1 添加版权

webpack.config.js

代码语言：javascript复制

onst webpack = require('webpack')

module.exports = {
  ...
  plugins: [
    new webpack.BannerPlugin('最终版权归AAA所有')
  ]
}

2 打包html

1. 目前，我们的index.html文件存放在项目的根目录下

• 真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，name打包的js等文件就没有意义了。
• 所以，我们需要将index.html文件导包放到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件。

1. HtmlWebpackPlug插件可以为我们做以下事情

• 自动生成一个index.html文件（可以指定模板来生成）
• 将打包的js文件，自动通过script标签插入到body中。

1. 安装

代码语言：shell复制

npm install html-webpack-plugin@3.2.0 --save-dev

4.使用插件，修改webpack.config.js文件中的plugins部分的内容如下

• 这里的template表示根据什么模板来生成index.html
• 另外，我们需要删除之前在output中添加的publicPath属性
• 否则插入的script标签中的src可能会有问题

代码语言：javascript复制

plugins: [
    new webpack.BannerPlugin('最终版权归AAA所有')
    // new HtmlWebpackPlugin()
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
]

3 js压缩

代码语言：shell复制

npm install uglifyjs-webpack-plugin --save-dev

代码语言：javascript复制

const uglifuJsPlugin = require('uglifujs-webpack-plugin')

plugins: [
  new uglifyJsPlugin()
]

前端 webpack2 vue.js

0 人点赞