javascript - webpack watch 编译每个文件

Question

根据webpack documentation for watches

webpack can watch files and recompile whenever they change.

在我看来，这意味着 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 和类似的观察者将整个包保存在内存中，并观察文件流。你可以把它想象成一个异步的 reduce。每次将数据推送到流时，它都会相应地更新累积的包，直到流关闭并且任务结束。

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

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

为了演示，克隆一个更大的项目并注意第一次编译(整个包)和后续(单个文件)更新之间的区别。所用时间应该有一个数量级的差异。