Webpack工作流拆分厂商和应用程序代码高效

Question

我很难找到足够的Webpack文档和例子来为我的情况找到一个理想的开发工作流。以下是使工作流变得理想的所有特性：

1. 观看，最好是通过杯，与有效的缓存。(不要认为我需要热模块替换，并怀疑它可能不适合我的开发环境。)
2. 供应商模块(现在我只有npm包，不是所有这些包都在主文件中公开UMD全局，如果是这样的话) 不解析&在监视期间重新编译(因此重新编译更快)， b.不要接收源地图(因此浏览器devtools响应速度更快)，以及 编写一个不同的vendor.js包，浏览器可以将其与应用包分开缓存。
3. 应用程序模块是 明确说明所有依赖关系(即，即使import React from 'react';实际上是全局暴露的，还是通过#2进行的)， b.在监视期间重新编译，以及 c.确实收到了一个源地图。

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

虽然我在文档中看到了如何创建特定于供应商的包(转载于此处：通过NPM跨多个Browserify或Webpack包共享模块的简单解决方案)，但提供的简单示例不涉及2a和2b。

我在文档中看不到任何方法来指定不同的编译配置(源代码映射等)。对于不同的块，或者创建完全独立的Webpack包，其中包含可以相互引用的单独配置文件，除非通过全球化所有供应商库并将它们作为外部(?)使用，这并不理想……

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

我是不是漏掉了其他Webpack用户知道的东西？做这件事最好的方法是什么？

还是Webpack不是这个工作的合适工具？

Answer 1

观看，最好是通过杯，与有效的缓存。(不要认为我需要热模块替换，并怀疑它可能不适合我的开发环境。)

使用webpack开发服务器。

对于这一点，您并不需要Gulp，但是您可以在Gulp中使用它的Node (我正在这么做)。

供应商模块(现在我只有npm包，不是所有这些包都在主文件中公开UMD全局，如果是这样的话) 不解析&在监视期间重新编译(因此重新编译更快)，

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

b.不要接收源地图(因此浏览器devtools响应速度更快)，以及

不知道怎么做这件事。我认为源地图要么全部输入要么全部输出。但是您可以使用devtool: 'eval'，它的工作速度比源映射快得多。

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

我想你是在找按名字分裂-webpack插件。

应用程序模块是 明确说明所有依赖关系(即从“React”导入；即使React实际上是全球公开的，或者是通过#2进行的)，

这会管用的。要使用require全局公开的库，请使用配置选项。

b.在监视期间重新编译，以及

更改后，将重新编译(如果使用webpack-dev-server)。

这并不能回答你所有的问题，但我希望这足以说明这是否适合你。我不认为“不看库”像你说的那样是个大问题(重建缓存模块的代价很小)，如果你抛弃源代码地图，使用devtool: 'eval'，我会说它真的很快。最后，Webpack有一个新的观察解决方案，所以您可能想让它转一转。它应该有更好的待遇。