为什么 webpack watch 不更新我的代码？

Question

我最近将我的项目更新为 webpack v5，但我无法再使用 watch 选项。它正在监视文件，并在文件更改时做出反应，但输出永远不会更新。当我启动手表时，一切都会构建，但不会在我进行更改时构建。

我正在使用这些版本：

"webpack": "^5.1.0",
"webpack-cli": "^4.0.0",

这是我的 webpack 配置文件 (webpack.config.dev.js):

const path = require('path')

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-source-map',
  entry: {
    'front-js': path.resolve(__dirname, 'src/js/front/front.js')
  },
  output: {
    filename: '[name].min.js?ver=[contenthash:8]',
    path: path.resolve(__dirname, 'dist')
  }
}

这就是我运行:

webpack --config webpack.config.dev.js --watch

这是我更改 front.js 文件时在终端中输出的示例：

Compilation  starting…

(node:9623) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.

Compilation  finished

asset front-js.min.js?ver=0300de4a 57.3 KiB [emitted] [immutable] (name: front-js)
orphan modules 10.7 KiB [orphan] 5 modules
runtime modules 997 bytes 4 modules
modules by path ./src/js/front/ 32 KiB
  ./src/js/front/front.js 888 bytes [built] [code generated]
  ./src/js/front/modules/customSelect.js 5.13 KiB [built] [code generated]
  ./src/js/front/modules/forms.js 3.51 KiB [built] [code generated]
  ./src/js/front/modules/header.js 7.56 KiB [built] [code generated]
  ./src/js/front/modules/iframeComm.js 1020 bytes [built] [code generated]
  ./src/js/front/modules/scrollListener.js 377 bytes [built] [code generated]
  ./src/js/front/modules/lazy.js 1.58 KiB [built] [code generated]
  ./src/js/front/modules/lightbox.js 2.94 KiB [built] [code generated]
  ./src/js/front/modules/parallax.js 3.25 KiB [built] [code generated]
  ./src/js/front/modules/socialShare.js 379 bytes [built] [code generated]
  ./src/js/front/modules/utilities.js 5.43 KiB [built] [code generated]
./node_modules/objectFitPolyfill/dist/objectFitPolyfill.min.js 2.89 KiB [built] [code generated]
webpack 5.1.0 compiled successfully in 235 ms

[webpack-cli] watching files for updates...

Compilation  starting…


Compilation  finished

assets by status 57.3 KiB [cached] 1 asset
cached modules 44.8 KiB [cached] 16 modules
runtime modules 997 bytes 4 modules
./src/js/front/front.js 888 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 40 ms

[webpack-cli] watching files for updates...

所以它注意到变化并打印“编译开始…”“编译完成”，但是如果我查看“dist”文件夹，文件还没有更新。

如果我切换到：

"webpack": "^4.0.0",
"webpack-cli": "^3.0.0",

然后 watch 选项可以工作，但我无法让 tree-shaking 工作。

更新：

我缩小了范围。这不是 --watch 导致问题的原因。如果我尝试更新任何文件，只有当该文件不在“dist”文件夹中时它才有效。因此，要么我需要在每次构建文件时清除“dist”文件夹，要么我需要弄清楚为什么现有文件没有得到更新。

Answer 1

事实证明它与 --watch 标志无关。这是我的输出。

旧（错）

output: {
  filename: '[name].min.js?ver=[contenthash:8]',
  path: path.resolve(__dirname, 'dist')
}

新（正确）

output: {
  filename: '[name].[contenthash].min.js',
  path: path.resolve(__dirname, 'dist')
}

完全不确定旧输出是如何运行的。

为什么 webpack watch 不更新我的代码？

Why is webpack watch not updating my code?

webpack

webpack-cli