Webpack-dev-server 每次更改后都会发出所有 block

标签 webpack webpack-dev-server webpack-hmr

我刚刚为我们的开发环境实现了热重载。我的 javascript 被分成很多 block 。每次我对文件进行更改时,所有 block 都会重新提交。我正在运行 webpack-dev-server。

这是一个例子:

Hash: 83298e5f7612c91d96ee
Version: webpack 1.13.1
Time: 2417ms
chunk    {0} static/js/music/bundle.js (bundle) 1.87 MB
     + 591 hidden modules
chunk    {1} static/js/music/1.js 609 kB {0}
     + 103 hidden modules
chunk    {2} static/js/music/2.js 179 kB {0}
     + 42 hidden modules
chunk    {3} static/js/music/3.js 186 kB {0}
     + 44 hidden modules
chunk    {4} static/js/music/4.js 85.5 kB {0}
     + 12 hidden modules
chunk    {5} static/js/music/5.js 35.5 kB {0}
     + 9 hidden modules
chunk    {6} static/js/music/6.js 835 kB {0}
     + 163 hidden modules
chunk    {7} static/js/music/7.js 817 kB {0}
     + 157 hidden modules
chunk    {8} static/js/music/8.js 953 kB {0}
     + 189 hidden modules
chunk    {9} static/js/music/9.js 11.6 kB {0} {16} {21}
  [901] ./js/base/mychange.jsx 9.24 kB {9} [built]
     + 1 hidden modules
chunk   {10} static/js/music/bundle2.js (bundle2) 1.87 MB
     + 590 hidden modules
chunk   {11} static/js/music/11.js 1.23 MB {10}
     + 216 hidden modules
chunk   {12} static/js/music/bundle3.js (bundle3) 1.87 MB
     + 590 hidden modules
chunk   {13} static/js/music/13.js 1.23 MB {12}
     + 215 hidden modules
chunk   {14} static/js/music/14.js 873 kB {12}
     + 160 hidden modules
chunk   {15} static/js/music/15.js 1.22 MB {12}
     + 212 hidden modules
chunk   {16} static/js/music/bundle4.js (bundle4) 1.87 MB
     + 590 hidden modules
chunk   {17} static/js/music/17.js 566 kB {16}
     + 93 hidden modules
chunk   {18} static/js/music/18.js 474 kB {16}
     + 33 hidden modules
chunk   {19} static/js/music/19.js 486 kB {16}
     + 33 hidden modules
chunk   {20} static/js/music/20.js 955 kB {16}
     + 190 hidden modules
webpack: bundle is now VALID.

如您所见,实际上只构建了 mychange.jsx 文件。然而,其余的仍然被发出,并且这个变化花了整整2.4秒。

这是为什么呢?我是否缺少 webpack 的某些设置?

当我运行 webpack --watch 并进行更改时,只会发出正确的 block 。所以,我知道这一定是我遗漏的一些小东西。

最佳答案

尝试在 stats 对象中添加 chunks:false 来解决这个问题。引用:https://webpack.github.io/docs/node.js-api.html

devServer: {
    stats: { chunks:false }
}

Here's the relevant code 。看起来可接受的预设值是:无、仅错误、最小、正常、详细,否则您可以指定自己的对象:

{
    hash: false,
    version: false,
    timings: false,
    assets: false,
    chunks: false,
    modules: false,
    reasons: false,
    children: false,
    source: false,
    errors: false,
    errorDetails: false,
    warnings: false,
    publicPath: false
}

关于Webpack-dev-server 每次更改后都会发出所有 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37872155/

相关文章:

javascript - webpack - 从特定入口点排除文件

javascript - 是否可以在 webpack 构建期间记录进度?

javascript - npm run build > bundle.js 未创建

vue.js - 如何将命令行参数传递给 vue.config.js?

node.js - Webpack 5 错误 - 未捕获的 ReferenceError : require is not defined

webpack - 在webpack监视模式下,有没有一种方法可以在webpack上一次更新构建时在屏幕上显示时间戳?

reactjs - 无法让 Webpack 2 HMR React 工作

reactjs - Electron.js和带有Pack-react-app的webpack

webpack - SyntaxError : expected expression, 得到 '<' 错误 - vue

javascript - 本地 ES 模块(浏览器或 Node.js)的热模块替换*没有* Webpack?没有构建工具