Question

我的index.php如下所示：

<script src="app/bower_components/jquery/dist/jquery.min.js"></script>
<script src="app/bower_components/angular/angular.min.js"></script>
<script src="app/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app/bower_components/angular-sanitize/angular-sanitize.min.js"></script>

我想添加webpack来捆绑所有这些文件并缩小它们我没有找到办法做到这一点。

我已经安装了npm，node和webpack 我把webpack变成了简单的文件，例如：webpack entry.js bundle.js。但不是我的角度应用程序

Answer 1

让我回答一下，然后针对您的用例。

一般情况：

Webpack

是模块捆绑包
至少需要entry和output 构造

我在哪里配置/列出我的所有应用程序代码？

您配置但代码。请继续阅读...

webpack如何知道要捆绑哪些代码/模块？

Webpack将查看为entry配置的代码，然后在内部构建其模块依赖项（作为依赖关系图）。

如何声明模块依赖？

简而言之：使用require("module-or-path-here")或import "module-or-path-here"。请注意，javascript（ES6 a.k.a ES2015）本身现在具有本机模块支持。这是关于JS模块的good article。

什么是依赖图？

Webpack将从为entry配置的代码开始，然后获取其直接依赖项。然后它会找出那些直接依赖的依赖关系等等......

依赖图完成后，webpack将开始处理它们并将它们捆绑到位于output.filename的{{1}}

很好，但我想为ex执行一些资源（JS / CSS / SCSS /图像等）特定的工作。缩小js代码。怎么做？

Webpack非常灵活（功能强大），可以通过loaders和plugins 配置特定于资源的工作。

具体说明：

AngularJS中的模块（即1.x）不与webpack使用的模块相同。如您所见，在声明angularJS中的模块时，您通过调用output.path来定义具有angular的模块。

一个选项是确保捆绑所有角度模块定义文件（即包含angular.module）第一个，然后是需要这些模块的角度组件。有几种方法可以做到这一点。对于前者使用通用模式命名所有角度模块声明文件，然后配置webpack以首先拾取它们。

使用webpack实现缩小非常简单。您可以尝试webpack documentation中指出的其中一个选项。

使用带有angular.1.5，php和bower的webpack

1 个答案: