现有 Angular 项目中的 Webpack 源连接答案

【问题标题】：Webpack sources concatenation in existing angular project现有 Angular 项目中的 Webpack 源连接
【发布时间】：2016-09-20 14:46:51
【问题描述】：

我有一个现有的 angular 项目，它使用 grunt 来构建任务。我打算迁移到 webpack。根据 webpack 文档，我必须在我希望在结果包中包含的所有脚本文件中使用 CommonJS 样式，因为这是 webpack 用于依赖解析的方式。

但是 Angular.js 已经有它自己的依赖解析特性，它允许不以 CommonJS 风格显式定义所有依赖。所以我想对我的 JS 文件使用简单的连接，而不是在大型项目的每个文件中添加 require(...)。在我看来，这将是额外不必要的工作，因为使用 angular 时文件顺序没有区别。

但看起来 webpack 推动我使用 CommonJS 方法并在现有代码库中进行大量更改而没有为项目带来任何利润。据我所知，我不能在entry 配置参数中使用正则表达式或“star”-syntax，如下所示：

{
    entry: './scripts/**/*.js',
    //...
}

所以我必须要么使用 CommonJS 方法，要么生成一个包含所有应用程序文件名的巨大数组：https://webpack.github.io/docs/configuration.html#entry。但这种方法看起来是一种解决方法。

有没有办法使用 webpack 对源文件进行所需的简单连接？

【问题讨论】：

【解决方案1】：

没有简单的方法可以做到这一点，因为这不是 webpack 的用途。 Webpack 不是一个缩小器，但实际上是一个模块捆绑器。它捆绑模块。如果你的代码没有被组织成模块，那么 webpack 对你真的没有任何用处。

如果您不使用模块系统，则在当前的 grunt 设置中使用 webpack 将不会获得任何收益。

【讨论】：