面试题：Webpack自定义构建流程以适配复杂Angular业务场景

Question

假设你正在开发一个具有复杂业务逻辑和特殊部署要求的Angular项目，现有的Webpack默认构建流程无法完全满足需求。请描述你将如何自定义Webpack的构建流程，使其能够适配这种复杂场景，例如如何处理特殊的第三方库集成、多环境差异化构建等问题，并给出关键代码示例。

Answer 1

1. 安装必要依赖

首先确保项目中安装了@angular - cli和webpack相关依赖。如果尚未安装，可以通过以下命令安装：

npm install @angular - cli webpack webpack - cli --save - dev

2. 创建自定义Webpack配置文件

在项目根目录下创建webpack.extra.js文件（文件名可自定义），此文件用于定义自定义的Webpack配置。

3. 处理特殊第三方库集成

方式一：使用ProvidePlugin

如果某些第三方库需要在全局作用域下使用，可以使用ProvidePlugin。例如，要在全局使用lodash：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      _: 'lodash'
    })
  ]
};

方式二：使用externals

对于一些不需要打包进项目的第三方库（例如通过CDN引入的库），可以使用externals。假设引入jquery通过CDN：

module.exports = {
  externals: {
    jquery: 'jQuery'
  }
};

4. 多环境差异化构建

安装@angular - cli - environment

npm install @angular - cli - environment --save - dev

创建不同环境的配置文件

在src/environments目录下创建不同环境的配置文件，例如environment.production.ts和environment.staging.ts。

自定义Webpack构建脚本

在webpack.extra.js中，可以根据环境变量来加载不同的配置。例如：

const path = require('path');

module.exports = (config, context) => {
  const environment = context && context.environment;
  if (environment === 'production') {
    // 生产环境配置
    config.output.filename = '[name].[chunkhash].js';
  } else if (environment ==='staging') {
    //  staging环境配置
    config.output.filename = '[name].[hash].js';
  }
  return config;
};

修改angular.json

在architect.build和architect.serve中添加以下配置，使@angular - cli使用自定义的Webpack配置：

{
  "builder": "@angular - cli:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.extra.js"
    },
    // 其他原有配置...
  }
}

5. 其他自定义配置

还可以在webpack.extra.js中对module.rules进行修改，例如添加对特定文件类型的加载器。假设要添加对less文件的支持：

module.exports = (config, context) => {
  config.module.rules.push({
    test: /\.less$/,
    use: [
      'to - string - loader',
      'css - loader',
      'less - loader'
    ]
  });
  return config;
};

通过以上步骤，可以自定义Webpack的构建流程，满足复杂业务逻辑和特殊部署要求的Angular项目。