Question

我有一个旧项目，想将其从gulp移至webpack。 Project使用带有gulp-inject插件的cableep，因此所有代码都依赖于全局变量，并且没有导入CommonJS / AMD / ES6模块。但是据我了解，webpack通过基于模块导入解析依赖图来构建捆绑包。是否可以将此类项目迁移到Webpack，然后逐步更新代码以使用ES6导入并删除全局变量？ webpack是否有类似于wiredep的东西？您建议采用哪种方法逐步将项目迁移到ES6模块？

Answer 1

除了使用wiredep或gulp-inject插件以外，没有其他经验，然后阅读了两个库的功能，以下内容可能会帮助您理解迁移以及可以使用的插件。< / p>

Webpack Expose Loader

expose loader webpack plugin允许您将库添加到全局名称空间。这样，代码中需要它的其他部分将可以访问它。

Gulp注入Webpack插件

我会让the docs说话。

Gulp具有出色的HTML编写器，称为Gulp Inject。有很多   功能强大。

如果要迁移到Webpack的现有项目，则为   希望这些功能可以立即使用Webpack   CLI。

此插件包装Gulp Inject，以便您无需运行即可使用它   喝了它依赖于Gulp中使用的Vinyl File System，但是   不是Gulp本身。

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

我希望这会有所帮助。

Answer 2

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

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'
  }

从gulp，wiredep，gulp-inject和glob迁移到Webpack和ES6模块

2 个答案: