webpack - 从 gulp、wiredep、gulp-inject 和 glob 迁移到 webpack 和 ES6 模块

Question

我有一个遗留项目，想把它从 gulp 转移到 webpack。项目使用带有 gulp-inject 插件的wiredep，因此所有代码都依赖于全局变量，并且没有导入 CommonJS/AMD/ES6 模块。但据我了解，webpack 通过基于模块导入解析依赖关系图来构建捆绑包。是否可以将这样的项目迁移到 webpack，然后逐步更新代码以使用 ES6 导入并删除全局变量？webpack 有类似wiredep 的东西吗？你有什么方法可以将项目逐步迁移到 ES6 模块？

Answer 1

除了阅读这两个库的功能之外，没有使用wiredep或gulp-inject插件的经验，以下内容可能会帮助您了解迁移以及可以使用哪些插件。

Webpack 暴露加载器

暴露加载器webpack 插件允许您将库添加到全局命名空间。通过这种方式，您的代码中需要它的其他部分将能够访问它。

Gulp 注入 Webpack 插件

我会让文档自己说话。

Gulp 有一个名为 Gulp Inject 的出色的 HTML 编写器。它有很多强大的功能。

如果您有要迁移到 Webpack 的现有项目，最好使用 Webpack CLI 立即使用这些功能。

这个插件包装了 Gulp Inject，这样你就可以在不运行 Gulp 的情况下使用它。它依赖于 Gulp 中使用的 Vinyl 文件系统，但不依赖于 Gulp 本身。

通过结合这两个插件，您应该能够迁移到 Webpack 而无需调整应用程序的整个结构。

我希望这有帮助。

Answer 2

最后我得到了webpack-concat-plugin，它允许您将来自 bower_component （不仅）库的 js 依赖项连接到一个包中，然后可以选择将其缩小并注入 index.html （使用html-webpack-plugin），因此它允许我创建与项目非常相似的设置喝了一大口。唯一的事情是，现在我应该明确指定我希望在 bundle 中包含的 bower_components 中的所有 js 文件，而wiredep 会自动执行此操作。这个插件解决了整个问题：

new ConcatPlugin({
  uglify: true, // actually it is just a minifier
  sourceMap: false,
  name: 'bower.bundle',
  outputPath: 'vendor',
  fileName: '[name].js',
  filesToConcat: [
    "@bower_components/jquery/jquery.min.js",
    ...
  ],
  attributes: {
    async: false // file order is preserved same as in 'filesToConcat'
  }