深入探索Webpack 5核心机制与最佳实践

1// 现代配置方案
2module.exports = {
3  output: {
4    filename: '[name].[contenthash].js',
5    clean: {
6      keep: /\.gitkeep/, // 保留特殊文件
7    }
8  }
9}

1// tsconfig.json
2{
3  "compilerOptions": {
4    "paths": {
5      "webpack": ["node_modules/webpack/types.d.ts"]
6    }
7  }
8}

1output: {
2  filename: 'js/[name].[contenthash:8].js',
3  chunkFilename: 'chunks/[id].[chunkhash:6].js',
4  assetModuleFilename: 'assets/[hash][ext][query]'
5}

1import(
2  /* webpackChunkName: "dashboard", webpackPrefetch: true, webpackMode: "eager" */
3  './dashboard'
4)

1// 联邦模块声明
2new ModuleFederationPlugin({
3  name: 'app1',
4  filename: 'remoteEntry.js',
5  exposes: {
6    './Widget': './src/Widget',
7  },
8  shared: {
9    react: { singleton: true }
10  }
11})

1// 安全删除console的Loader实现
2const { transformSync } = require('@babel/core')
3
4module.exports = function(source) {
5  const { code } = transformSync(source, {
6    plugins: [
7      ({ types: t }) => ({
8        visitor: {
9          CallExpression(path) {
10            if (t.isMemberExpression(path.node.callee) && 
11                t.isIdentifier(path.node.callee.object, { name: 'console' })) {
12              path.remove()
13            }
14          }
15        }
16      })
17    ]
18  })
19  return code
20}

1// Next.js混合渲染配置
2module.exports = {
3  webpack: (config, { isServer }) => {
4    if (!isServer) {
5      config.resolve.alias.fs = require.resolve('./browser/fs-shim')
6    }
7    return config
8  }
9}

1// Webpack 4 → 5迁移示例
2{
3  test: /\.(png|jpe?g)$/,
4  use: [{
5    loader: 'url-loader',
6    options: { limit: 8192 }
7  }]
8}
9
10// 转换为
11{
12  test: /\.(png|jpe?g)$/,
13  type: 'asset',
14  parser: {
15    dataUrlCondition: {
16      maxSize: 8192
17    }
18  }
19}

1cache: {
2  type: 'filesystem',
3  buildDependencies: {
4    config: [__filename] // 配置文件变更自动失效缓存
5  }
6}

1// 性能监控插件示例
2class BundleMonitor {
3  apply(compiler) {
4    compiler.hooks.done.tap('BundleMonitor', stats => {
5      const assets = stats.toJson().assets
6      analytics.send({
7        totalSize: assets.reduce((sum, a) => sum + a.size, 0),
8        entryPoints: assets.filter(a => a.name.endsWith('.js'))
9      })
10    })
11  }
12}