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


我无法找到足够的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可能不适合这项工作吗?


11404
2017-12-21 18:44


起源



答案:


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

使用 的WebPack-DEV-服务器

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

供应商模块(现在我只有npm软件包,并不是所有软件包都在主文件中暴露UMD全局变量,如果它归结为那些)

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

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

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

不知道怎么做这个。我认为源地图要么全部都存在,要么全部存在。但你可以使用 devtool: 'eval' 它比源地图工作得快得多。

C。写入一个独特的vendor.js包,浏览器可以从应用包中单独缓存。

我想你在找 拆分按名称的WebPack-插件

应用程序模块

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

这会奏效。至 require 全球公开的图书馆,使用 externals 配置选项

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

更改了什么,将被重新编译(如果您使用webpack-dev-server)。

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


9
2018-01-02 15:50



你有重要观点的建议 - 谢谢。困扰我的唯一部分,就是我从其他Webpack用户那里看到的很多响应,简洁的是“使用webpack-dev-server”。 Gulp在我看来是一个比Webpack更灵活,更强大的任务运行,构建,观看等工具,所以我坚持不懈。我认为Webpack的一个严重缺点是它想要创建另一个“生态系统”而不是与已经存在的东西很好地集成。再次感谢。 - davidtheclark
@davidtheclark Gulp只是一个任务选手。你应该至少给予 webpack-dev-server 试一试,它使用Webpack的监视模式,这意味着快速增量重建。试图用Gulp和gulp-watch复制这种行为有一个严重的缺点,因为他们无法告诉Webpack哪些模块发生了变化。此外,你将错过热模块重新加载(虽然你说它不是你的优先事项)。 Webpack dev服务器虽然可以包含在Gulp任务中。 - Dan Abramov
“Gulp在我看来是一个更加灵活和强大的工具,用于任务运行,构建,观察”。我不认为这是一个公平的比较。一个是通用任务运行器,另一个是JS捆绑器。他们解决不同的问题,可以一起工作。 - Dan Abramov


答案:


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

使用 的WebPack-DEV-服务器

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

供应商模块(现在我只有npm软件包,并不是所有软件包都在主文件中暴露UMD全局变量,如果它归结为那些)

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

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

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

不知道怎么做这个。我认为源地图要么全部都存在,要么全部存在。但你可以使用 devtool: 'eval' 它比源地图工作得快得多。

C。写入一个独特的vendor.js包,浏览器可以从应用包中单独缓存。

我想你在找 拆分按名称的WebPack-插件

应用程序模块

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

这会奏效。至 require 全球公开的图书馆,使用 externals 配置选项

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

更改了什么,将被重新编译(如果您使用webpack-dev-server)。

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


9
2018-01-02 15:50



你有重要观点的建议 - 谢谢。困扰我的唯一部分,就是我从其他Webpack用户那里看到的很多响应,简洁的是“使用webpack-dev-server”。 Gulp在我看来是一个比Webpack更灵活,更强大的任务运行,构建,观看等工具,所以我坚持不懈。我认为Webpack的一个严重缺点是它想要创建另一个“生态系统”而不是与已经存在的东西很好地集成。再次感谢。 - davidtheclark
@davidtheclark Gulp只是一个任务选手。你应该至少给予 webpack-dev-server 试一试,它使用Webpack的监视模式,这意味着快速增量重建。试图用Gulp和gulp-watch复制这种行为有一个严重的缺点,因为他们无法告诉Webpack哪些模块发生了变化。此外,你将错过热模块重新加载(虽然你说它不是你的优先事项)。 Webpack dev服务器虽然可以包含在Gulp任务中。 - Dan Abramov
“Gulp在我看来是一个更加灵活和强大的工具,用于任务运行,构建,观察”。我不认为这是一个公平的比较。一个是通用任务运行器,另一个是JS捆绑器。他们解决不同的问题,可以一起工作。 - Dan Abramov