（面试常问）webpack4和webpack5有什么区别

Tree Shaking优化
在Webpack 4中，尽管已经支持Tree Shaking，但开发者可能需要手动配置optimization.usedExports或者使用像sideEffects标志来帮助Webpack更好地识别无用模块。

// Webpack 4配置示例
module.exports = {
  // ...
  optimization: {
    usedExports: true,
  },
};

// package.json
“sideEffects”: false,

而在Webpack 5中，对于ES模块的Tree Shaking处理更为精细，usedExports默认启用，同时sideEffects的检查也更加严格。

// Webpack 5配置中通常不需要显式设置usedExports
module.exports = {
  // ...
  optimization: {
    // 默认已优化，如有特殊情况可继续配置
  },
};

// Webpack 4配置示例
module.exports = {
  // ...
  optimization: {
    usedExports: true,
  },
};

而在Webpack 5中，对于ES模块的Tree Shaking处理更为精细，usedExports默认启用，同时sideEffects的检查也更加严格。

// Webpack 5配置中通常不需要显式设置usedExports
module.exports = {
  // ...
  optimization: {
    // 默认已优化，如有特殊情况可继续配置
  },
};

持久化缓存
在Webpack 4中，要实现缓存通常需要借助第三方插件，如hard-source-webpack-plugin，而Webpack 5则内置了持久化缓存机制。

// Webpack 4配合HardSourceWebpackPlugin
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HardSourceWebpackPlugin(),
  ],
};

// Webpack 5内建持久化缓存
// 使用cache.type='filesystem'启用
module.exports = {
  // ...
  cache: {
    type: 'filesystem',
  },
};

Asset Modules（资源模块）
Webpack 5引入了Asset Modules，这意味着处理诸如图片、字体等资源的方式发生了变化，不再需要单独的file-loader或url-loader。

// Webpack 4处理图片资源
const { rules } = require('webpack');
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'assets/images',
            },
          },
        ],
      },
    ],
  },
};

// Webpack 5处理相同资源
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 小于8KB的图片转为data URL
          },
        },
        generator: {
          filename: 'assets/images/[name][ext]',
        },
      },
    ],
  },
};

模块联邦（Module Federation）
这是Webpack 5引入的一个重要特性，允许跨项目共享模块。

// Webpack 5中主应用配置Module Federation
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host', // 应用名称
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js', // 远程应用入口地址
      },
      shared: {
        react: { singleton: true }, // 共享React依赖
      },
    }),
  ],
};

// Webpack 5中远程应用配置Module Federation
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      exposes: {
        './MyComponent': './src/components/MyComponent', // 暴露给主应用的组件
      },
      shared: {
        react: { singleton: true },
      },
    }),
  ],
};