面试题：Webpack多入口多出口在复杂项目架构下的动态配置与优化

配置思路

环境区分：通过 process.env.NODE_ENV 区分开发、测试、生产环境。
入口配置：根据环境动态设置入口文件，以适应不同业务模块在不同环境下的需求。
出口配置：同样依据环境动态调整输出路径和文件名等。
打包优化：在生产环境开启代码压缩、Tree Shaking等优化手段。

关键代码

基础配置文件（webpack.common.js）

const path = require('path');

module.exports = {
  // 基础入口配置，可被环境特定配置覆盖
  entry: {},
  output: {
    // 基础输出路径，可被环境特定配置覆盖
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: []
};

开发环境配置文件（webpack.dev.js）

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  entry: {
    // 根据开发环境动态设置入口文件
    module1: './src/module1/entry.dev.js',
    module2: './src/module2/entry.dev.js'
  },
  output: {
    // 开发环境输出路径
    path: path.resolve(__dirname, 'dev-dist'),
    filename: '[name].js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'dev-dist'),
    compress: true,
    port: 3000
  }
});

生产环境配置文件（webpack.prod.js）

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require('mini - css - extract - plugin');
const TerserPlugin = require('terser - webpack - plugin');
const OptimizeCSSAssetsPlugin = require('optimize - css - assets - plugin');

module.exports = merge(common, {
  mode: 'production',
  entry: {
    // 根据生产环境动态设置入口文件
    module1: './src/module1/entry.prod.js',
    module2: './src/module2/entry.prod.js'
  },
  output: {
    // 生产环境输出路径
    path: path.resolve(__dirname, 'prod - dist'),
    filename: '[name].[contenthash].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css - loader']
      }
    ]
  },
  optimization: {
    minimizer: [
      new TerserPlugin({}),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ]
});

测试环境配置文件（webpack.test.js）

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'test',
  entry: {
    // 根据测试环境动态设置入口文件
    module1: './src/module1/entry.test.js',
    module2: './src/module2/entry.test.js'
  },
  output: {
    // 测试环境输出路径
    path: path.resolve(__dirname, 'test - dist'),
    filename: '[name].[contenthash].js'
  }
});

用到的Webpack插件原理

webpack - merge：用于合并Webpack配置，将基础配置与环境特定配置合并，减少重复代码。它会深度合并对象，相同的数组项会合并，对象属性会覆盖，这样就可以在保持基础配置的同时，根据不同环境灵活调整。
MiniCssExtractPlugin：将CSS从JavaScript中提取出来，生成单独的CSS文件。原理是在Webpack的构建过程中，通过插件机制，在 loader 处理完CSS后，将CSS内容收集起来，最终输出为独立的CSS文件，这样有利于浏览器并行加载CSS和JavaScript，提高页面加载性能。
TerserPlugin：压缩JavaScript代码。它通过解析AST（抽象语法树），对代码进行优化和压缩，去除无用代码、缩短变量名等操作，以减小文件体积，提高加载速度。
OptimizeCSSAssetsPlugin：压缩CSS代码。它的原理是通过优化CSS语法，去除冗余代码、合并重复规则等，从而减小CSS文件体积，优化页面加载性能。

星途面试题库

面试题：Webpack多入口多出口在复杂项目架构下的动态配置与优化

知识考点

面试题答案

配置思路

关键代码

用到的Webpack插件原理