angular-cli webpack.config.js 文件在哪里 - 新的 angular6 不支持 ng 弹出 [英] angular-cli where is webpack.config.js file - new angular6 does not support ng eject

问题描述

更新:2018 年 12 月(参见Aniket"答案)

UPDATE: December 2018 (see 'Aniket' answer)

在 Angular CLI 6 中，你需要使用构建器，因为 ng eject 已被弃用，很快将在 8.0 中移除

With Angular CLI 6 you need to use builders as ng eject is deprecated and will soon be removed in 8.0

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

UPDATE: June 2018: Angular 6 does not support ng eject**

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

UPDATE: February 2017: use ng eject

更新:2016 年 11 月:angular-cli 现在只使用 webpack.您只需要使用 npm install -g angular-cli 正常安装即可.我们在 beta.10 和 beta.14 之间改变了构建系统，从 SystemJS 到 Webpack."，但实际上我使用 angular-cli 只是为了第一结构和文件夹，然后我手动使用 webpack 配置

UPDATE: November 2016: angular-cli now only use webpack. You only need install normally with npm install -g angular-cli. "We changed the build system between beta.10 and beta.14, from SystemJS to Webpack.", but actually i use angular-cli just to firs structure and folders and then anymore, i use webpack config manually

我已经安装了 angular cli:

I've installed angular cli with this:

npm install -g angular-cli@webpack

当我使用 angular1 和 web pack 时，我曾经修改过webpack.config.js"文件来执行所有任务和插件，但是我在用 angular-cli 创建的这个项目上看不到它的工作原理.这是魔法?

When I worked with angular1 and web pack , i used to modify "webpack.config.js" file to execute all the task and plugins, but i don't see on this project created with angular-cli who does it work. it's magic?

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

I see Webpack is working when i do:

ng serve 

"Version: webpack 2.1.0-beta.18"

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

but i don't understand the way that angular-cli config works...

推荐答案

在 Angular CLI 6 中，您需要使用构建器，因为 ng eject 已被弃用，并且很快将在 8.0 中移除.这就是我尝试执行 ng 弹出

With Angular CLI 6 you need to use builders as ng eject is deprecated and will soon be removed in 8.0. That's what it says when I try to do an ng eject

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

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

我试图在我的博客上的一篇博文中总结所有内容 - 如何在 Angular CLI 6 中使用自定义 webpack 配置自定义构建配置

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",

在 angular.json 中进行以下更改 -

In angular.json make following changes -

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

注意构建器和新选项 customWebpackConfig 的更改.也改了

Notice change in builder and new option customWebpackConfig. Also change

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

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

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.

然而，与 ng 弹出 不同，此处提供的配置将与默认配置合并，因此只需添加您想要编辑/添加的内容.

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

这篇关于angular-cli webpack.config.js 文件在哪里 - 新的 angular6 不支持 ng 弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！