1

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

4

1 回答 1

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')
}

不知道我是如何让旧的输出正常工作的。

于 2020-10-14T03:34:45.673 回答