Webpack Watch 简介和使用

Question

通常当你在开发中运行 Webpack 时，你希望在 watch 模式下 。 这将 Webpack 配置为监视项目中的文件以进行更改，并在文件更改时重新编译。 换句话说，您不必每次都手动重新运行 Webpack。

例如，假设您有以下 webpack.config.js 文件，它需要一个文件 app.js，并编译成 ./bin/app.min.js。

module.exports = {
  mode: 'development',
  entry: {
    app: `${__dirname}/app.js`
  },
  target: 'web',
  output: {
    path: `${__dirname}/bin`,
    filename: '[name].min.js'
  }
};

比方说 app.js 包含一个简单的 console.log()：

console.log('Hello, world');

现在，运行 ./node_modules/.bin/webpack --watch 你应该看到下面的输出。 确保同时安装了 Webpack 和 webpack CLI 。

说你修改 app.js 略有不同 console.log() 信息：

console.log('Hello, world!');

Webpack 将检测到更改并重新编译：

启用观看模式的其他方法

您还可以从 Webpack 配置文件中启用监视模式：

module.exports = {
  mode: 'development',
  watch: true, // Enable watch mode
  entry: {
    app: `${__dirname}/app.js`
  },
  target: 'web',
  output: {
    path: `${__dirname}/bin`,
    filename: '[name].min.js'
  }
};

然而，这种方法通常是一个糟糕的选择，因为如果你在 CI/CD 工具或 git commit hook 中编译，你不想在监视模式下运行 Webpack。 您应该使用启用手表模式 --watch 除非你确定你永远不想在没有的情况下运行 Webpack watch。