Question

webpack可以随时观看文件并重新编译。

据我所知，这意味着，webpack只会编译已更改的文件。

我有webpack.config.js看起来像这样

module.exports = {
    watch: true,
    watchOptions: {
        ignored: /node_modules/,
    },
    entry: {
        "first": './web/assets/js/first.tsx',
        "second": './web/assets/js/second.tsx',
    },
    // other stuff
}

现在，当运行./node_modules/.bin/webpack时，输出日志会使所有文件都被编译

Webpack is watching the files…

Hash: d0ac7b9d70b906068f77
Version: webpack 4.3.0
Time: 10462ms
Built at: 3/29/2018 11:50:43 AM
              Asset       Size  Chunks             Chunk Names
    first.js    234 KiB       0  [emitted]  first
second.js  739 bytes       1  [emitted]  second
Entrypoint second = second.js
Entrypoint first = first.js
  [13] ../locale-data/index.js (ignored) 15 bytes {0} [built]
  [14] ./web/assets/js/react/component/First/First.tsx 1.05 KiB {0} [built]
  [15] ./web/assets/js/translations/tr.ts 4.83 KiB {0} [built]
  [16] ./web/assets/js/translations/it.ts 4.64 KiB {0} [built]
  [17] ./web/assets/js/translations/fr.ts 4.78 KiB {0} [built]
  [18] ./web/assets/js/translations/en.ts 4.31 KiB {0} [built]
  [19] ./web/assets/js/translations/de.ts 4.67 KiB {0} [built]
  [31] ./lib/locales (ignored) 15 bytes {0} [built]
  [37] ./lib/locales (ignored) 15 bytes {0} [built]
  [57] ./web/assets/js/first.tsx 559 bytes {0} [built]
  [58] ./web/assets/js/second.tsx 350 bytes {1} [built]
    + 48 hidden modules

当我现在改变first.tsx中的内容时，输出是相同的。这看起来像每个文件都被重新编译，但我只想重新编译已更改的条目。我在这里遗漏了什么或误解了什么吗？

我的目标是只重新编译已经改变的文件，这应该是webpack watch IMO的工作方式。

更新：为了进一步证明，我删除了两个编译文件，在一个入口点更改了一行，观察者仍然编译了这两个文件。

Update2：以下是重现

的一些步骤

重现的步骤：这些步骤假设您已经安装了yarn/npm。

查看我创建的您可以在https://github.com/tzfrs/webpack-watch-bug
最初运行yarn install或npm install。
运行./node_modules/.bin/webpack。这应该在dist文件夹中创建两个文件并自动观看。
删除dist/second.js
更改src/first.js
src/second.js没有任何更改，但仍会重新编译（因为再次创建dist/second.js）。

Answer 1

Webpack和类似观察者将您的整个捆绑包保存在内存中，并观看文件流。你可以认为它有点像异步减少。每次将数据推送到流时，它都会相应地更新累积的捆绑包，直到流关闭并且任务结束。

如果它有一个out目录，它会在每次更改时将bundle的最新状态（即整个bundle）写入该目录。但即使我们认为这是主要目标，如果我们采用减少类比，它更像是一种“副作用”。

这并不意味着它重新编译了所有内容......实际上，像不安全删除这样的意外更改实际上可能会破坏观察者，正是因为每次发生变化时它都是而不是从头开始。

对于演示，克隆较大的项目并注意第一次编译（整个包）和后续（单个文件）更新之间的区别。所需的时间应该有一个数量级的差异。

webpack watch编译每个文件

1 个答案: