6 常用插件及内置插件

插件

clean-webpack-plugin

该插件在npm run build时自动清除dist目录后重新生成，非常方便

1. 安装插件

   npm i clean-webpack-plugin -D

2. 引入插件

   const CleanWebpackPlugin = require('clean-webpack-plugin')
   

3. 使用插件, 在plugins中直接创建对象即可

   plugins: [
       new HtmlWebpackPlugin({
         filename: 'index.html',
         template: './src/index.html'
       }),
       new CleanWebpackPlugin()
     ],
   

copy-webpack-plugin

1. 安装插件

   npm i copy-webpack-plugin -D

2. 引入插件

   const CopyWebpackPlugin = require('copy-webpack-plugin')
   

3. 使用插件, 在plugins中插件对象并配置源和目标

   from: 源, 从哪里拷贝, 可以是相对路径或绝对路径, 推荐绝对路径

   to: 目标, 拷贝到哪里去, 相对于output的路径, 同样可以相对路径或绝对路径, 但更推荐相对路径(直接算相对dist目录即可)

   plugins: [
       new HtmlWebpackPlugin({
         filename: 'index.html',
         template: './src/index.html'
       }),
       new CleanWebpackPlugin(),
       new CopyWebpackPlugin([
         {
           from: path.join(__dirname, 'assets'),
           to: 'assets'
         }
       ])
     ],
   

BannerPlugin

这是一个webpack的内置插件，用于给打包的JS文件加上版权注释信息

1. 引入webpack

   const webpack = require('webpack')
   

2. 创建插件对象

   plugins: [
       new HtmlWebpackPlugin({
         filename: 'index.html',
         template: './src/index.html'
       }),
       new CleanWebpackPlugin(),
       new CopyWebpackPlugin([
         {
           from: path.join(__dirname, 'assets'),
           to: 'assets'
         }
       ]),
       new webpack.BannerPlugin('111')
     ],