带有角度 1.4 ES 5 的 Webpack

【问题标题】：Webpack with angular 1.4 ES 5带有角度 1.4 ES 5 的 Webpack
【发布时间】：2018-07-20 20:33:43
【问题描述】：

我正在开发一个使用 Angular 1.4 和 ES5 构建的应用程序。它使用 gulp 来缩小文件。我想使用 Webpack 来利用代码拆分和捆绑 JavaScript 文件中的所有内容等功能。

是否可以将 webpack 与 ES5 代码一起使用，因为我看到几乎所有关于 WebPack 的博客都处理 ES6。任何指针将不胜感激。非常感谢。

【问题讨论】：

是的，这是可能的。到目前为止，您尝试过什么？

标签： angularjs webpack ecmascript-6 gulp ecmascript-5

【解决方案1】：

This is how my team did it。本质上，您想创建“入口点文件”，为所有文件执行requires，因为这就是 webpack 的工作方式（它遵循依赖关系树）。然后将 webpack 指向这些“入口点文件”。

上面链接中的示例使用 TypeScript，但您可以像这样轻松使用 ES5：

# ./entry-points/feature1.js
importAll = function(r) {
  r.keys().forEach(r);
};

importAll(require.context('./app/feature1', true, /module\.js$/));
importAll(require.context('./app/feature1', true, /(^(?!.*(spec|module)\.js).*\.js)$/));

您可以为 Object.keys here 和 Array.forEach` here 获取 polyfill。

然后从你的 webpack 配置中指向这个文件，如下所示：

entry: {
  'feature1': './entry-points/feature1.js'
}

【讨论】：