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

我有一个遗留项目，并希望将其从gulp移动到webpack。该项目使用wiredep和gulpinject插件，所以所有代码都依赖于globals，并且没有CommonJS/AMD/ES6模块的导入。但据我所知，webpack通过基于模块导入解析依赖关系图来构建捆绑包。是否可以将这样一个项目迁移到webpack，然后逐步更新代码以使用ES6导入并删除全局文件？webpack是否有类似wiredep的功能？您可以建议采用什么方法逐步将project迁移到ES6模块？

没有使用

wiredep

或

gulp inject

插件的经验，然后阅读这两个库的功能，以下内容可能有助于您理解迁移以及可以使用哪些插件

网页包公开加载程序

允许将库添加到全局命名空间。通过这种方式，需要它的代码的其他部分将能够访问它

吞咽注入网页包插件

我会让你自己说的

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

如果您有要迁移到Webpack的现有项目，则它是 希望这些功能能够立即与Web包一起使用 CLI

这个插件包装了GulpInject，这样你就可以不用运行它了 吞咽它依赖于Gulp中使用的乙烯基文件系统，但是 而不是狼吞虎咽

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

---

我希望这会有所帮助。

最后我得到了

webpack-concat-plugin

，它允许您将来自bower_组件（不仅仅是）库的js依赖项连接到一个捆绑包中，然后可以选择缩小它并将其注入index.html（使用

html-webpack-plugin

），所以它允许我创建与project使用gulp时非常相似的设置。唯一的一件事是，现在我应该显式地指定来自bower_组件的所有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'
  }