在 angular6 中自定义 webpack 配置

在 angular6 中自定义 webpack 配置

我们已经使用 angular6 开发了一套后台管理系统，且体量日益增大，为了优化打包速度，想从 webpack 着手。

但是Angular Cli 6 禁用了webpack的自定义配置，官方似乎并未提供自定义配置webpack的方法；在此之前，可以使用ng eject把默认的webpack提取到代码中，进行自定义，但是 angular6 不支持了，只能使用 第三方库来实现。

1. 探索阶段–成功在 angular6 中使用 自定义 webpack 配置

1.1 使用脚手架新建项目，安装包

npm i -D @angular-builders/custom-webpack@6
npm i -D @angular-builders/dev-server@6

注意：这里的版本号一定要和cli的版本相同，不然就会报错说缺少一个类（但是我 angular 是 @6.0.2 ，最初是尝试安装以下两个版本：
npm i -D @angular-builders/custom-webpack@7.4.3
npm i -D @angular-builders/dev-server@7.3.1
也可行），这里安装包的版本很重要，不指定的话，@angular-builders/custom-webpack 默认好像是最新的，之后启动项目或者进行打包就会报错，如下：

Schema validation failed with the following errors: Data path ".builders['browser']" should have required property 'class'.

我为此百度了很久，在此文章中找到解决方法。

1.2 修改 angular.json 配置

• projects.{project name}.architect.build节点

  • 1.builder替换成:@angular-builders/custom-webpack:browser
  • 2.options增加

    "customWebpackConfig": {
      "path": "./webpack.config.js",   //自定义 webpack 配置的路径
      "mergeStrategies": {    //合并策略：默认是 append--追加，还可以是 prepend , replace
          "externals": "append"    // 向  angular6 的默认打包配置中追加自定义配置
      }
    }
    

• projects.{project name}.architect.serve节点

  • builder替换成:@angular-builders/dev-server:generic

解释一下都是什么意思：
bulider : 默认是情况下是cli自己配置，你将builder的配置变成 @angular-builders/custom-webpack:browser 后面有一个 path，他指向了你自己的 webpack 配置。这个配置不会覆盖系统的配置，而是添加。
以上变化如下图（只标注了前后差别，两张图不是一个项目的）：


1.3 新增自定义配置文件
在与 angular.json 平级处新增 webpack.config.js 文件

module.exports = {
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: 'px2rem-loader',
                // options here
                options: {
                    remUnit: 75,
                    remPrecision: 8
                }
            }]
        }]
    },
};
console.log('运行了我的自定义webpack设置')  //此行代码在打包时有打印，就说明此webpack生效了

接下来运行 npm run build ，看到配置中的文字确实打印出来了

以上配置的自定义webpack 确实在 npm run build 时运行了，但是还是没有实现我们的目的–优化打包，接下来继续研究 webpack 配置，然后再完善此文档，待续。。。