javascript - Webpack 工作流程有效地拆分 vendor 和应用程序代码

Question

我很难找到足够的 Webpack 文档和示例来针对我的情况制定理想的开发工作流程。以下是使工作流程变得理想的所有功能:

1. 观看，最好是通过 Gulp，使用高效的缓存。 (不要认为我需要热模块更换并怀疑它可能不适合我的开发环境。)

一个。在监视期间不解析和重新编译(因此重新编译更快)，

不接收 sourcemap(因此浏览器开发工具响应速度更快)，并且

写入不同的 vendor.js 包，浏览器可以将其与应用包分开缓存。

2. 应用模块是

   一个。明确所有依赖项(即 import React from 'react'; 即使 React 实际上是全局公开的或通过 #2 的东西)，

   是在观看期间重新编译，并且

   确实收到源 map 。

我在文档或示例中阅读的大部分内容似乎都没有触及这个工作流程。

虽然我确实在文档中看到了如何创建特定于 vendor 的 bundle (转载于此处:Simple solution to share modules loaded via NPM across multiple Browserify or Webpack bundles)，但提供的简单示例并未解决 2a 和 2b。

我在文档中没有看到任何方法可以为不同的 block 指定不同的编译配置(sourcemaps 等)，或者创建完全独立的 Webpack 包和可以相互引用的单独的配置文件，除非通过全局化所有 vendor 库并将它们用作外部(？)，这并不理想......

此外，我很好奇 Gulp 用户是使用 gulp-webpack 还是像 http://webpack.github.io/docs/usage-with-gulp.html 中提供的那样的设置. (我不确定 webpack-dev-server 是否适合我的开发环境，所以如果可能的话我想坚持使用 gulp-watch。)

我是否遗漏了其他 Webpack 用户知道的信息？执行此操作的最佳方法是什么？

或 Webpack 是否可能不是完成这项工作的正确工具？

Answer 1

Watching, ideally through Gulp, with efficient caching. (Don't think I need hot module replacement and suspect it might not fit into my dev environment well.)

使用webpack-dev-server .

你并不真的需要 Gulp，但你可以将它的 Node API 与 Gulp 一起使用(我正在这样做)。

Vendor modules (right now I have only npm packages, not all of them exposing UMD globals in their main file, if it came down to that) that are

a. not parsed & re-compiled during watch (so recompilation is faster),

我不认为未更改的文件会在监视期间被解析或重新编译。

b. do not receive a sourcemap (so browser devtools are faster to respond), and

不知道这个怎么做。我认为 source maps 要么全进要么全出。但是您可以使用 devtool: 'eval'，它比源映射快得多。

c. write to a distinct vendor.js bundle that browsers can cache separately from app bundles.

我认为您正在寻找 split-by-name-webpack-plugin .

App modules that are

a. explicit about all dependencies (i.e. import React from 'react'; even if React is actually globally exposed or something via #2),

这会起作用。要要求 全局公开的库，请使用 externals config option .

b. are re-compiled during watch, and

发生变化的内容将被重新编译(如果您使用 webpack-dev-server)。

这并不能回答您的所有问题，但我希望它足以弄清楚它是否适合您。我不认为“不监视库”是一个大问题，就像你说的那样(重建缓存模块的性能损失很小)，如果你放弃 sourcemaps 并使用 devtool: 'eval' ，我会说它真的很快。最后，there's a new watching solution in the works for Webpack所以你可能想试一试。它应该有更好的性能。