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

角度的 Webpack

Stafan

2020-05-28

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

使用Angular CLI 6时,您需要使用构建器,因为不建议使用ng jet,并且很快将在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配置的工作方式...

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

6个回答
Gil伽罗小宇宙 2020.05.28

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

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

仲羽 2020.05.28

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

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

若合 2020.05.28

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

在此处输入图片说明

You can use angular-builders package (https://github.com/meltedspark/angular-builders) to provide your custom webpack config.

I have tried to summarize all in a single blog post on my blog - How to customize build configuration with custom webpack config in Angular CLI 6

but essentially you add following dependencies -

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

In angular.json make following changes -

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

Notice change in builder and new option customWebpackConfig. Also change

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

Notice the change in builder again for serve target. Post these changes you can create a file called custom-webpack.config.js in your same root directory and add your webpack config there.

However, unlike ng eject configuration provided here will be merged with default config so just add stuff you want to edit/add.

Vicky 2020.05.28

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


过时的:

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

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

启人 2020.05.28

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

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

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

神离樱 2020.05.28

有一种不错的方法可以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

问题类别

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