问题 Angular CLI 6:自定义webpack配置


在以前的Angular版本中,有一个选项 喷射 这样您就可以根据需要修改webpack配置。
此功能最常见的用例之一是添加自定义webpack加载器。

在Angular 6中,这个选项已经存在 暂时禁用,所以目前没有办法获得webpack配置(旁边用角度源代码查找)。看来他们会 启用 这个功能在6.1(或许没有),但在那之前它不可用。

有没有办法将自定义webpack配置添加到使用@ angular / cli 6的Angular 6应用程序?或者,有没有办法“弹出”新的Angular CLI在引擎盖下使用的webpack配置?


12713
2018-06-27 18:01


起源



答案:


免责声明:我是以下图书馆的所有者

您可以使用 角的助洗剂 允许您扩展现有库的库 browser 和 server 使用自定义webpack配置的目标。

用法非常简单:

  1. 安装库: npm i -D @angular-builders/custom-webpack
  2. 修改你的 angular.json

    "architect": {
       ...
       "build": {
           "builder": "@angular-builders/custom-webpack:browser"
           "options": {
                  "customWebpackConfig": {
                     path: "./extra-webpack.config.js",
                     replaceDuplicatePlugins: true
                  }
                  "outputPath": "dist/my-cool-library",
                  "index": "src/index.html",
                  "main": "src/main.ts",
                  "polyfills": "src/polyfills.ts",
                  "tsConfig": "src/tsconfig.app.json"
                  ...
           }
    
  3. 超webpack.config.js 到您的应用程序的根目录
  4. 把额外的配置放在里面 超webpack.config.js (只是一个简单的webpack配置)

这里 你可以找到一个增加的例子 node-loader 到浏览器配置。

进一步阅读:
自定义Angular CLI 6构建 - ng弹出的替代方案


11
2017-07-02 07:11



我无法在我的项目中使用它。它根本不加载extra-webpack.config.js。我按照说明安装了所有依赖项。任何提示如何调试? - Aaaron
请在github上打开一个问题: github.com/meltedspark/angular-builders/issues。指定你的 angular.json, 你的 的package.json 和你的 超webpack.config.js。 - meltedspark
发表了一个问题 github.com/meltedspark/angular-builders/issues/19 - Aaaron
我想为测试版本做这个,有可能吗?你能就此提供一些指示吗?我需要做的就是附加一个插件。 - Joe Walker
自定义webpack的测试构建器尚不存在。您可以打开功能请求 这里。您也可以为此制作PR;)您想如何修改测试版本? - meltedspark


答案:


免责声明:我是以下图书馆的所有者

您可以使用 角的助洗剂 允许您扩展现有库的库 browser 和 server 使用自定义webpack配置的目标。

用法非常简单:

  1. 安装库: npm i -D @angular-builders/custom-webpack
  2. 修改你的 angular.json

    "architect": {
       ...
       "build": {
           "builder": "@angular-builders/custom-webpack:browser"
           "options": {
                  "customWebpackConfig": {
                     path: "./extra-webpack.config.js",
                     replaceDuplicatePlugins: true
                  }
                  "outputPath": "dist/my-cool-library",
                  "index": "src/index.html",
                  "main": "src/main.ts",
                  "polyfills": "src/polyfills.ts",
                  "tsConfig": "src/tsconfig.app.json"
                  ...
           }
    
  3. 超webpack.config.js 到您的应用程序的根目录
  4. 把额外的配置放在里面 超webpack.config.js (只是一个简单的webpack配置)

这里 你可以找到一个增加的例子 node-loader 到浏览器配置。

进一步阅读:
自定义Angular CLI 6构建 - ng弹出的替代方案


11
2017-07-02 07:11



我无法在我的项目中使用它。它根本不加载extra-webpack.config.js。我按照说明安装了所有依赖项。任何提示如何调试? - Aaaron
请在github上打开一个问题: github.com/meltedspark/angular-builders/issues。指定你的 angular.json, 你的 的package.json 和你的 超webpack.config.js。 - meltedspark
发表了一个问题 github.com/meltedspark/angular-builders/issues/19 - Aaaron
我想为测试版本做这个,有可能吗?你能就此提供一些指示吗?我需要做的就是附加一个插件。 - Joe Walker
自定义webpack的测试构建器尚不存在。您可以打开功能请求 这里。您也可以为此制作PR;)您想如何修改测试版本? - meltedspark