面试题：Webpack在与Angular集成时如何处理第三方库的依赖管理

Question

请描述在Webpack与Angular集成项目中，如何通过Webpack配置来管理像lodash这样的第三方库的依赖，包括安装、引入和打包优化等方面。

Answer 1

1. 安装lodash： 在项目根目录下，通过npm或yarn安装lodash。
   • 使用npm：npm install lodash --save
   • 使用yarn：yarn add lodash
2. 引入lodash： 在Angular项目中，通常在需要使用的组件或服务中引入。例如，在一个组件的TypeScript文件中：

import { Component } from '@angular/core';
import _ from 'lodash';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  constructor() {
    const result = _.map([1, 2, 3], (num) => num * 2);
    console.log(result);
  }
}

3. Webpack配置中的打包优化：
   • 使用ProvidePlugin（可选）： 如果希望在多个模块中无需显式引入lodash就可使用，可以在Webpack配置中使用ProvidePlugin。首先安装@angular - cli - webpack（如果还未安装），然后在webpack.extra.js（Angular CLI与Webpack集成时的扩展配置文件）中配置：

const webpack = require('webpack');

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

这样在项目中的模块里就可以直接使用_来代表lodash，而无需再显式引入。 - 代码分割： Webpack可以通过splitChunks配置来优化lodash等第三方库的打包。在webpack.extra.js中：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](lodash)[\\/]/,
          name:'vendor - lodash',
          chunks: 'all'
        }
      }
    }
  }
};

这样会将lodash单独打包成一个文件，在浏览器加载时可以更好地利用缓存，提升加载性能。同时，在angular.json中确保architect.build下的builder为@angular - cli - webpack:browser，以便应用Webpack的这些配置。