一种自定义 Angular-cli 6.x/7.x 默认 webpack 配置的方法

2018-11-09 0 条评论 5,597 次阅读 被赞了 6 次
本文发布于：2018-11-09，最后更新于：2022-12-20，如果内容失效请留言告知。
目录
[隐藏]

Angular-cli 通过 angular.json 实现构建配置，对于复杂配置需求的支持，可以通过 ng eject 输出 webpack 的配置文件，然后自定义 webpack 来达到目的。

当前对于 Angular 6.x/7.x 的项目，Angular-cli 需采用 6.x/7.x 版本，而这些版本不支持 ng eject 命令，于是希望自定义 webpack 配置实现更多复杂需求就无法下手。

1 自定义 Angular-cli 7.x 默认 webpack 的方案思路

由于 Angular-cli 内部是封装 webpack 来实现的，如果我们能够 hacker 一下，在其 webpack 配置封装过程中注入自定义配置，就也可以实现自定义需求。

按照这个思路，通过翻阅 Angular-cli 的源码，得到如下注入方法。该注入方法采用的 angular 相关工具链各版本为：

1
2
3
4
{
  "@angular-devkit/build-angular": "0.10.4",
  "@angular/cli": "7.0.4"
}

2 新建注入代码的脚本

新建注入代码的脚本 scripts/insert-to-cli-webpack.js，内容参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const chalk = require('chalk');
const fs = require('fs');
const path = require('path');
const rootDir = path.resolve(__dirname, '../');
const buildNgSrcPathList = {
  browser: path.resolve(__dirname, '../node_modules/@angular-devkit/build-angular/src/browser/index.js'),
  karma: path.resolve(__dirname, '../node_modules/@angular-devkit/build-angular/src/karma/index.js'),
  server: path.resolve(__dirname, '../node_modules/@angular-devkit/build-angular/src/server/index.js'),
};
const webpackCliPath = path.resolve(__dirname, '../config/webpack-cli-inject.js').replace(/\\/g, '\\\\');
const findStr = 'webpackMerge(webpackConfigs)';
 
try {
  Object.keys(buildNgSrcPathList).forEach(type => {
    const filePath = buildNgSrcPathList[type];
    const filePathShort = filePath.replace(rootDir, '');
    const replaceStr = `require('${webpackCliPath}')(webpackMerge(webpackConfigs), wco, '${type}')`;
    const configText = fs.readFileSync(filePath, 'utf-8');
 
    if (configText.includes(replaceStr)) {
      return;
    }
 
    if (!configText.includes(findStr)) {
      console.log(chalk.red.bold(`文件 ${chalk.yellow.bold(filePathShort)} 中未发现可替换的字符串： ${findStr}`));
      return;
    }
 
    console.log(chalk.yellow.bold(` Inserting to: `), chalk.yellow(filePathShort));
 
    const output = configText.replace(findStr, replaceStr);
 
    fs.writeFileSync(filePath, output);
  });
 
  console.log(chalk.green.bold(' well done!'));
} catch(err) {
  console.log(err);
}

3 新建自定义的 webpack 配置文件

如文件名为 config/webpack.cli-inject.js，内容参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
const webpackMerge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const pkg = require('../package.json');
const isProd = ENV === 'prod' || ENV === 'production';
 
module.exports = (commonConfig, wco, cfgType) => {
  const customCfg = {
    module: {
      rules: [
        {
          test: /\.pug$/,
          use: [
            'raw-loader',
            {
              loader: 'pug-html-loader',
              options: {
                doctype: 'html'
              }
            }
          ]
        },
        // {
        //   test: /\.css$/,
        //   use: ['to-string-loader', { loader: 'css-loader', options: { url: false } }]
        // },
        {
          test: /\.less$/,
          use: [ 'style-loader', 'css-loader', 'sprites-loader', 'less-loader' ]
        },
      ]
    },
    plugins: [
      /*
      * See: https://github.com/ampedandwired/html-webpack-plugin
      */
      new HtmlWebpackPlugin({
        pkg: pkg,
        // ----以上为自定义参数，用于模板中调用----
        xhtml: true,
        template: 'src/index.html',
        filename: 'index.html',
        chunksSortMode: function(a, b) {
          const entryPoints = ['inline', 'polyfills', 'sw-register', 'styles', 'vendor', 'main'];
          return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0]);
        },
        inject: 'body',
        minify: isProd
          ? {
              caseSensitive: true,
              collapseWhitespace: true,
              keepClosingSlash: true
            }
          : false
      }),
    ],
    /**
     * Disable performance hints
     * See: https://github.com/a-tarasyuk/rr-boilerplate/blob/master/webpack/dev.config.babel.js#L41
     */
    // performance: {
    //   hints: false
    // },
    // devtool: 'inline-cheap-source-map'
  };
 
  // 过滤一些默认的规则，使用自定义的
  commonConfig.module.rules = commonConfig.module.rules.filter(rule => {
    if (rule.test) {
      // 过滤 html 的解析
      if (rule.test.test('index.html') && rule.loader === 'raw-loader') {
        return false;
      }
 
      // // 过滤 less 的解析
      if (rule.test.test('index.less')) {
        return false;
      }
    }
 
    return true;
  });
 
  const mergedCfg = webpackMerge([commonConfig, customCfg]);
 
  // console.log(cfgType, wco);
  // console.log(mergedCfg.module.rules)
 
  return mergedCfg;
};

如上内容示例，我们自定义了如下的 webpack 配置功能：

  • 添加了 pug 模板编译支持；
  • 我们希望在模板内引用一些变量，使用了 HtmlWebpackPlugin 插件，并屏蔽了默认的 html 解析配置；
  • 我们使用 less 并希望实现 css sprites，于是自定义了 less 的规则。

注意两点：

  • 默认对 html 文件的解析 loader 必须屏蔽，否则模板会全部解析为字符串，ejs 语法不会生效；
  • less-loader 当前不支持 less 3.x 版本，应当安装 less^2.7.x。angular-cli 内部是采用 postcss 实现的 less 编译。

4 在 package.json 配置 postinstall 钩子

在每次执行 npm install 或 yarn install 后，立即执行 node scripts/insert-to-cli-webpack.js，即可实现自定义 webpack 配置的需求。

我们可以在 package.json 中配置执行注入脚本的命令 webpack.inject，示例参考：

1
2
3
4
"scripts": {
  "postinstall": "npm run webpack.inject",
  "webpack.inject": "node scripts/insert-to-cli-webpack.js"
}

相关文章:

Default Thumbnail升级至 Angular8 及实现自定义 webpack 配置的方案 升级至 Angular 13+ 后开发模式太慢的原因及构建性能优化 Default Thumbnail一次 webpack dll 无效的场景原因分析与解决 Default ThumbnailAngular 9 新特性及 Angular 8 升级至 Angular 9 参考 Default Thumbnailwebpack 构建结果移除 use strict 严格模式 Default Thumbnailwebpack 关闭 sourceMap 导致 sass-loader 报错问题分析与解决方法 Default ThumbnailAngular 中实现自定义组件的双向绑定的两种方法 Default ThumbnailAngular 项目升级至 Angular6 Default ThumbnailAngular 单元测试框架由 karma 迁移为 Jest 实践 Default ThumbnailAngular 文档生成：使用 compodoc 生成 Angular2+ 源码组件的 API 文档 Default Thumbnail在 Angular-cli 中引入 simple-mock 实现前端开发 API Mock 接口数据模拟 正确区分开发与生产模式：移除调试代码的几种方法
点赞 (6)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
  1. Pingback： 升级至 Angular8 及实现自定义 webpack 配置的方案 - 志文工作室

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code