11

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

  1. 观看，理想情况下通过 Gulp，高效缓存。（不要认为我需要热模块更换并怀疑它可能不适合我的开发环境。）

  2. 供应商模块（现在我只有 npm 包，如果归根结底，并不是所有的都在其主文件中公开 UMD 全局变量）是

    一个。在监视期间未解析和重新编译（因此重新编译更快），

    湾。不接收源映射（因此浏览器开发工具响应速度更快），并且

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

  3. 应用程序模块

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

    湾。在监视期间重新编译，并且

    C。确实收到一个源图。

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

虽然我确实在文档中看到了如何创建特定于供应商的捆绑包（在此处转载：Simple solution to share modules loaded via NPM across multiple Browserify or Webpack bundles），但提供的简单示例并未涉及 2a 和 2b。

我在文档中没有看到任何方法可以为不同的块指定不同的编译配置（源映射等），或者使用可以相互引用的单独配置文件创建完全独立的 Webpack 包，除非通过全球化所有供应商库和将它们用作外部（？），这并不理想......

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

我错过了其他 Webpack 用户知道的东西吗？最好的方法是什么？

或者Webpack 是否可能不是适合这项工作的工具？

4

1 回答 1

9

观看，理想情况下通过 Gulp，高效缓存。（不要认为我需要热模块更换并怀疑它可能不适合我的开发环境。）

使用webpack-dev-server。

您实际上并不需要 Gulp，但您可以将其 Node API 与 Gulp 一起使用（我正在这样做）。

供应商模块（现在我只有 npm 包，如果归根结底，并不是所有的都在其主文件中公开 UMD 全局变量）是

一个。在监视期间未解析和重新编译（因此重新编译更快），

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

湾。不接收源映射（因此浏览器开发工具响应速度更快），并且

不知道怎么做这个。我认为源地图要么全进要么全出。但是您可以使用devtool: 'eval'比源映射更快的工作方式。

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

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

应用程序模块

一个。明确所有依赖项（即从'react'导入React；即使React实际上是全局公开的或通过#2），

这将起作用。要require全局公开的库，请使用externalsconfig option。

湾。在监视期间重新编译，并且

更改的内容将被重新编译（如果您使用 webpack-dev-server）。

这并不能回答你所有的问题，但我希望它足以弄清楚这是否适合你。我不认为“不看库”是你说的那么大的问题（重建缓存模块的性能损失很小），如果你放弃 sourcemaps 并使用devtool: 'eval'，我会说它真的很快。最后，Webpack 正在开发一个新的监视解决方案，因此您可能想试一试。它应该有更好的性能。

于 2015-01-02T15:50:22.953 回答