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

文章目录

• ​​1 添加版权​​
• ​​2 打包html​​
• ​​3 js压缩​​

1 添加版权

webpack.config.js

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插件。

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

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

3. 安装

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

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

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

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

3 js压缩

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

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

plugins: [
  new uglifyJsPlugin()
]