1 实时打包

默认情况下，每次打包都需要运行打包命令。

但是我们日常开发中每次改完代码，保存代码之后，代码就自动打包更新运行文件了。

下面来看看这个功能是如何配置的。

webpack配置：

module.exports = {
  watch: true,//开启监控，只要改代码就会实时编译
  watchOptions: {//监控配置
    poll: 1000,//每一秒询问1000次（需要更新吗？）
    aggregateTimeout: 500,//防抖，500毫秒内输入的代码只打包一次（连续输入代码时不打包）
    ignored: /node_modules/,//node_modules文件夹不需要监控
  },
}

查看结果

运行：

npm run build

这时候会发现打包命令执行完之后并没有结束，而是暂停了进程，它在等待你下次代码修改，只要修改了代码并保存，就会自动重新运行打包命令。

watch的原理：

watch开启后，webpack会隔一段时间（poll设置的时间）轮训一次要打包的文件，监听到变化，会缓存一下第一次，在一段时间时候后（aggregateTimeout设置的时间），检测所有修改的文件。这时候把所有修改文件一起编译打包。

也可以在运行webpack时添加：--watch命令启用watch

2 webpack小插件

1. cleanWebpackPlugin

第三方库插件。

作用：每次打包输出目录之前，删除已有的打包目录。

安装：

npm install clean-webpack-plugin -D

webpack配置：

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

module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ],
}

打包运行：

npm run build

发现原有./dist目录下的内容都被删除并且生成了新文件。

2. copyWebpackPlugin

第三方库插件。

作用：拷贝其他文件（如：文档目录）到打包目录(如：./dist）

安装：

npm install copy-webpack-plugin -D

webpack配置：

let CopyWebpackPlugin = require("copy-webpack-plugin")

module.exports = {
    new CopyWebpackPlugin({
      patterns: [{
        from: "./doc",//源路径
        to: "./doc",//目标路径
      }]
    })
}

打包运行：

npm run build

发现文档目录./doc已经被打包到./dist文件夹下面，并包含所有内容。

3. bannerPlugin

内置插件，无需安装。

作用：版权声明。

webpack 配置：

const webpack = require('webpack')

module.exports = {
    new webpack.BannerPlugin("2021年6月1日，作者：毛毛"),
}

打包运行：

npm run build

发现打包目录./dist文件夹下面，每个js文件内容的最前面都会多出一行设置的版权文案注释。

/*! 2021年6月1日，作者：毛毛 */