在 webpack 中监视文件的变化

当我们在进行前端开发时，经常需要将多个 JS 文件打包成一个文件，以减少页面加载时间。而 webpack 是一个非常流行的在前端项目中进行打包的工具，它的核心就是将多个 JS 文件打包成一个或多个 bundle 文件。

在开发过程中，我们经常需要修改源代码，并查看修改后的效果。这时，webpack 的监视功能就非常重要了。我们可以通过配置 webpack 来让它不断的监视源代码的变化，并且自动的重新打包。这样就可以省去手动执行打包命令的麻烦了。

接下来，我们就来介绍一下如何在 webpack 中监视文件的变化。

配置 webpack

要配置 webpack，在项目根目录下创建一个 webpack.config.js 文件。在文件中，我们需要导出一个配置对象，来告诉 webpack 如何进行打包。其中，我们可以通过配置 entry 来告诉 webpack 从哪些文件开始打包，通过配置 output 来告诉 webpack 打包后生成的文件放在哪里。

为了让 webpack 监视源代码的变化，我们需要在配置中设置 watch 为 true。同时，我们还可以配置 watchOptions，在文件发生变化时的行为，比如间隔多长时间重新打包等等。

下面是一个简单的 webpack 配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  watch: true,
  watchOptions: {
    ignored: /node_modules/,
    poll: 1000,
  },
};

上面的配置文件指定了要将 src 目录下的 index.js 文件打包成一个名为 bundle.js 的文件，并将其放在 dist 目录下。同时，它也被配置为监视源代码的变化，并且忽略 node_modules 目录下的文件。每隔 1 秒钟重新打包一次。

启动 webpack

当我们完成了 webpack 的配置后，就可以启动 webpack 了。

在 package.json 文件中添加如下 script：

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

然后在命令行中执行 npm run build 就可以启动 webpack 了。

此时，webpack 就会监视我们的源代码，并且在每次修改后自动重新打包。我们可以在浏览器中打开 index.html 文件，查看修改后的效果。

结论

通过配置 webpack 的 watch 和 watchOptions，我们可以让 webpack 在开发过程中持续监视源代码的变化，并且自动的重新打包。这样就可以大大提高我们的开发效率了。