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

角度 Webpack

十三Mandy

2020-03-23

更新:2018年12月(请参阅``Aniket''答案)

使用Angular CLI 6时,您需要使用构建器,因为不建议使用ngject,并且很快会在8.0版中将其删除

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

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

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

我已经安装了角度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配置的工作方式...

第2603篇《angular-cli在哪里是webpack.config.js文件-新的angular6不支持ng弹出》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
西里神奇 2020.03.23

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

有几个项目可以与新的配置格式结合使用,这些项目提供了弹出的好处,而没有维护开销。ngx-build-plus就是一个这样的项目,可以在这里找到:https : //github.com/manfredsteyer/ngx-build-plus

泡芙 2020.03.23

有一种不错的方法可以angular-cli弹出webpack.config.js赶紧跑:

$ ng eject

这将在项目的根文件夹中生成webpack.config.js,您可以随意按自己的方式进行配置。这样做的缺点是package.json中的构建/启动脚本将被新命令替换,而不是

$ ng serve

你将不得不做类似的事情

$ npm run build & npm run start

此方法在所有最新版本的angular-cli中都应适用(我亲自尝试了一些,最早的是1.0.0-beta.21,最新的是1.0.0-beta.32.3

LGil 2020.03.23

我在想,发布产品时使用webpack会很容易。

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

番长樱梅 2020.03.23

现在可以弹出CLI的webpack配置。检查Anton Nikiforov的答案


过时的:

您可以在中修改配置模板angular-cli/addon/ng2/models到目前为止,尚无官方方法来修改webpack配置。

github上有一个关于此的封闭的“ wont-fix”问题:https : //github.com/angular/angular-cli/issues/1656

番长猴子 2020.03.23

根据此问题,一项设计决定是不允许用户修改Webpack配置以减少学习难度。

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

我不建议将其angular-cli用于生产应用程序,因为它受到了高度评​​价。

逆天蛋蛋 2020.03.23

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

在此处输入图片说明

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

我已尝试在博客上的单个博客文章中总结所有内容- 如何在Angular CLI 6中使用自定义Webpack配置自定义构建配置

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

  "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弹出配置不同,此处将与默认配置合并,因此只需添加要编辑/添加的内容即可。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android