Angle-cli 其中是 webpack.config.js 文件-new angular6不支持 ng 弹出

更新: 2018年12月(见“ Aniket”答案)

使用角 CLI 6，您需要使用构建器，因为 ng 弹出是不推荐的，并将很快在8.0中删除

更新: 2018年6月: Angular 6不支持 ng 弹出 * *

更新: 2017年2月: 使用 ng 弹出

更新: 2016年11月: 棱角斜面现在只使用 webpack。您只需使用 npm install-g angle-cli 正常安装即可。“我们在 beta.10和 beta.14之间更改了构建系统，从 SystemJS 改为 Webpack。”，但实际上我使用棱角-cli 只是为了第一个结构和文件夹，然后不再，我使用 webpack 配置手动

我用这个安装了角点:

npm install -g angular-cli@webpack

当我使用 angular1和 web pack 的时候，我常常修改“ webpack.config.js”文件来执行所有的任务和插件，但是在这个项目中，我没有看到使用 angle-cli 创建的工具。是魔法吗？

我看到 Webpack 正在工作，当我这样做:

ng serve


"Version: webpack 2.1.0-beta.18"

但我不明白角点配置是怎么工作的。

118809 次浏览
小开

CLI 的 webpack 配置现在可以被弹出。请选中 Anton Nikiforov 的回答。

过时:

您可以在 angular-cli/addon/ng2/models中修改配置模板。目前还没有正式的方法来修改 webpack 配置。

在 github 上有一个封闭的“习惯修复”问题: https://github.com/angular/angular-cli/issues/1656

小开

根据这个 问题，不允许用户修改 Webpack 配置以减少学习曲线是一个设计决策。

考虑到 Webpack 上有用的配置数量，这是一个很大的缺点。

我不推荐在生产应用程序中使用 angular-cli，因为它非常固执己见。

小开

有一个很好的方法从 角斜肌弹出 Webpack.config.js。只要运行:

$ ng eject

这将在项目的根文件夹中生成 webpack.config.js，您可以按照自己的方式自由配置它。这样做的缺点是，package.json 中的 build/start 脚本将被替换为新命令，而不是

$ ng serve

你必须做一些像

$ npm run build & npm run start

这种方法应该适用于所有最新版本的 angle-cli (我个人尝试了一些，最老的是 1.0.0-beta21，最新的是 1.0.0-beta 32.3)

小开

我的想法是，当产品发布时，拥有 webpack 会很容易。

仅供参考: https://github.com/Piusha/ngx-lazyloading

小开
最佳答案

使用角 CLI 6，您需要使用构建器，因为 ng 弹出是不推荐的，并将很快在8.0中删除。我做 弹射的时候就是这么说的

enter image description here

您可以使用棱角构建器包(https://github.com/meltedspark/angular-builders)来提供您自定义的 webpack 配置。

我试图在我的博客 如何自定义构建配置与自定义 webpack 配置在角度 CLI 6上的一篇博客文章中总结所有内容

但实际上，您可以添加以下依赖项-

  "devDependencies": {
"@angular-builders/custom-webpack": "^7.0.0",
"@angular-builders/dev-server": "^7.0.0",
"@angular-devkit/build-angular": "~0.11.0",

在 Angular Json中进行以下更改-

  "architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {"path": "./custom-webpack.config.js"},

注意构建器和新选项 customWebpackConfig 的变化

    "serve": {
"builder": "@angular-builders/dev-server:generic",

请再次注意服务目标的构建器的更改。发布这些更改后，您可以在相同的根目录中创建一个名为 Custom- webpack. config.js的文件，并在那里添加您的 webpack 配置。

但是，与此处提供的 弹射配置不同，这里将与默认配置合并，因此只需添加您想要编辑/添加的内容即可。


提交答案