angular-cli在哪里是webpack.config.js文件 - 新的angular6不支持ng弹出

时间:2016-08-28 02:40:48

标签: angular webpack angular-cli

更新:2018年12月(参见'Aniket'回答)

使用Angular CLI 6,您需要使用构建器,因为不推荐使用ng eject,很快就会在8.0中删除

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

更新:2017年2月:使用ng eject

更新:2016年11月:angular-cli现在只使用webpack。您只需要使用npm install -g angular-cli正常安装。 “我们改变了beta.10和beta.14之间的构建系统,从SystemJS到Webpack。”但实际上我只使用angular-cli来结构和文件夹,然后再使用webpack配置

我已安装了角度cli:

npm install -g angular-cli@webpack

当我使用angular1和web pack时,我曾经修改过“webpack.config.js”文件来执行所有任务和插件,但我没有看到使用angular-cli创建的这个项目是谁工作的。这是魔法?

我看到Webpack正在工作:

ng serve 

"Version: webpack 2.1.0-beta.18"

但我不明白angular-cli配置的工作方式......

6 个答案:

答案 0 :(得分:151)

angular-cli 中弹出 webpack.config.js 是个不错的方法。跑吧:

$ ng eject

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

$ ng serve

你必须做类似

的事情
$ npm run build & npm run start

这个方法应该适用于所有最新版本的angular-cli(我个人试过一些,最老的是 1.0.0-beta.21 ,最新的 1.0。 0-beta.32.3

答案 1 :(得分:45)

根据这个issue,设计决定不允许用户修改Webpack配置以减少学习曲线。

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

我不建议将angular-cli用于生产应用程序,因为它是高度自以为是。

答案 2 :(得分:18)

使用Angular CLI 6时,您需要使用构建器,因为不建议使用ng jet,并且很快将在8.0中将其删除。这就是我尝试进行 ng弹出

时所说的

enter image description here

您可以使用angular-builders软件包(https://github.com/meltedspark/angular-builders)提供自定义的webpack配置。

我已尝试在自己博客的一个博客文章-How to customize build configuration with custom webpack config in Angular 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配置。

但是,与此处提供的 ng弹出配置不同,该配置将与默认配置合并,因此只需添加要编辑/添加的内容即可。

答案 3 :(得分:11)

现在可以弹出CLI的webpack配置。查看Anton Nikiforov's answer

过时:

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

关于这个问题,github上有一个封闭的“不会修复”问题:https://github.com/angular/angular-cli/issues/1656

答案 4 :(得分:0)

发布产品时,我想拥有webpack会很容易。

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

答案 5 :(得分:0)

根据ng eject的建议,您可以使用ngx-build-plus

  

有几个项目可以与新项目结合使用   提供无需维护即可弹出的好处的配置格式   高架。这样的项目之一就是ngx-build-plus,可在此处找到:https://github.com/manfredsteyer/ngx-build-plus