为啥 webpack watch 没有更新我的代码？

Posted 2023-02-22

【中文标题】为啥 webpack watch 没有更新我的代码？

【英文标题】：Why is webpack watch not updating my code?为什么 webpack watch 没有更新我的代码？

【发布时间】：2021-01-28 03:44:42

【问题描述】：

我最近将我的项目更新到 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”文件夹，要么我需要弄清楚为什么现有文件没有得到更新。

【参考方案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')

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