使用 Angular CLI 在 Angular 4 上配置 Webpack答案

【问题标题】：Configuring Webpack on Angular 4 with Angular CLI使用 Angular CLI 在 Angular 4 上配置 Webpack
【发布时间】：2017-11-11 09:00:44
【问题描述】：

在我的应用程序中，我想使用 SASS 和一些使用 NPM 加载的前端库。要设置捆绑，我需要使用 Webpack 之类的工具。

起初，我试图找到 Angular-CLI 使用的 Webpack 配置文件。后来，我发现 Angular-CLI 希望你从配置中解放出来。但我的问题是我需要先配置 SASS 转译等，然后才能运行我的应用程序，而手动运行一些命令确实不是一个好主意。我通常使用ng serve，顾名思义，让我测试我的应用程序+监视更改并应用更改。我想要做的是，运行一些脚本，当在此过程中检测到更改时执行。我该如何解决这个问题？

更新：

编译 SASS 是我必须解决的事情之一，现在已经解决了。我还想在构建中运行 Autoprefixer 并打包一些 node_modules。最好的方法是什么？

【问题讨论】：

ng new --style scss 会直接使用 SASS。您也可以随时在.angular-cli.json 中重新配置。如果你想要自己的 webpack 配置，那么随时ng eject。全部在文档中。
@NeilLunn 你能把我链接到这个特定的东西吗？我似乎找不到它。
也许尝试使用 gulp ？ AngularJS 在过去就是这样做的，所以也许你可以使用 gulp 来运行你的任务，并复制 ng serve 所做的事情
如果你唯一的问题是 @Neil 建议的 SASS，你可以打开 angular-cli.json 文件并更改扩展名，他会自动编译它（scss，less ...）

标签： angular npm build webpack-2

【解决方案1】：

Angular cli 支持 sass 和 less 开箱即用。您可以将--style 配置为ng new 或简单地编辑.angular-cli.json

"defaults": {
    "styleExt": "scss",  // or sass; both are accepted
}

如果您想查看完整选项，只需列出帮助：

ng help

当然如果你想要完全控制，你可以通过运行ng eject得到一个标准的webpack配置：

ng eject

随时。

【讨论】：

太棒了！我马上测试一下。还有一件事：一旦 SASS 被编译成 CSS，我想在它上面运行类似 Autoprefixer 的东西。我想做的另一件事是，我想加载一些前端库。我也可以配置它们吗？
@HassanAlthaf 如前所述，您可以通过运行 ng eject 进一步自定义内容，然后手动更改 webpack 配置。这还会为您的项目添加 sass 和更少的依赖项等，并在 package.json 中设置脚本
它打破了我的ng serve
@HassanAlthaf 是的，这是唯一的方法，因为 Angular CLI 团队不想默认公开 webpack 配置，看在上帝的份上，接受 NeilLunn 的回答，因为他给了你解决问题所需的一切问题。
@HassanAlthaf 没有更好的方法，你可以永远在这里等待我只是想说这就是我们目前所拥有的一切，我什至问过 Mike Brocchi（角度 CLI 团队成员）现场聊天中的角度飞行表演，他说这是一项正在进行的工作，现在我们不能默认暴露 web pack 配置无论如何祝你在你的问题上好运！

【解决方案2】：

因此，经过数小时的文档搜索、谷歌搜索等，我能够解决上面列出的每一个问题。很简单。

使用 CSS 预处理器

就像@NeilLunn 建议的那样，要使用 SCSS 或任何其他预处理器，您可以使用：

"defaults": {
    "styleExt": "scss" // or another pre-processor, or plain css itself.
}

更多关于使用其他预处理器的信息可以在这里找到：https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

在项目中加载 CSS/JS 依赖项

这个非常简单。您可以查看如何加载 Bootstrap 的示例，例如 here。

使用自动前缀

这是最痛苦的发现，但我终于找到了。事实证明，您所要做的就是this right here 并且确实有效！

【讨论】：