Webpack工作流程有效地分割供应商和应用程序代码

Question

我无法找到足够的Webpack文档和示例来为我的情况找出理想的开发工作流程.以下是使工作流程理想的所有功能:

1. 通过Gulp观察,有效的缓存.(不要以为我需要更换热模块并怀疑它可能不适合我的开发环境.)

2. 供应商模块(现在我只有npm软件包,并非所有软件包都在其主文件中公开UMD全局变量,如果归结为那些)

   一个.在监视期间没有解析和重新编译(因此重新编译更快),

   湾 不接收源图(因此浏览器devtools响应速度更快),以及

   C.写入vendor.js浏览器可以与应用程序包分开缓存的不同包.

3. 应用程序模块

   一个.明确所有依赖关系(import React from 'react';即使React实际上是全局暴露的,或者是通过#2),

   湾 在观看过程中重新编译,

   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

通过Gulp观察,有效的缓存.(不要以为我需要更换热模块并怀疑它可能不适合我的开发环境.)

使用webpack-dev-server.

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

供应商模块(现在我只有npm软件包,并非所有软件包都在其主文件中公开UMD全局变量,如果归结为那些)

一个.在监视期间没有解析和重新编译(因此重新编译更快),

我认为在观看期间不会解析或重新编译未更改的文件.

湾 不接收源图(因此浏览器devtools响应速度更快),以及

不知道怎么做这个.我认为源地图要么全部存在,要么全部存在.但是你可以使用devtool: 'eval'哪种方法比源地图更快.

C.写入一个独特的vendor.js包,浏览器可以与app bundle分开缓存.

我想你正在寻找split-by-name-webpack-plugin.

应用程序模块

一个.明确所有依赖关系(即从'react'导入React;即使React实际上是全局暴露的,也可以是#2),

这会奏效.对于require全局公开的库,请使用externalsconfig选项.

湾 在观看期间重新编译,并且

已更改的内容将被重新编译(如果您使用webpack-dev-server).

这并没有回答你的所有问题,但我希望能够弄清楚这是否适合你.我不认为"不看图书馆"就像你说的那样是一个大问题(重建缓存模块时几乎没有任何惩罚),如果你放弃源图和使用devtool: 'eval',我会说它真的很快.最后,有一个新的观察解决方案正在为Webpack工作,所以你可能想要给它一个旋转.它应该有更好的性能.