webpack打包配置

基于webpack@5.x

一、缓存设置

// 内存缓存: 速度快，配置简单，但占用内存且重启后失效
cache: {
  type: 'memory',
}

// 磁盘缓存 (filesystem)：持久性好，适合大型项目，但速度较慢，配置相对复杂。
cache: {
  type: 'filesystem',
  buildDependencies: {
    config: [__filename], // 配置文件的路径
  },
  cacheDirectory: path.resolve(__dirname, '.cache'), // 缓存目录
}

// 总结：
1、开发模式用内存缓存，电脑内存不够的误用；
2、生产模式用磁盘缓存，持久化缓存，进程重启后仍然可以使用缓存

二、一般打包优化配置

{
  entry: {
    // key: index作为打包后的产物名称
    index: path.resolve(__dirname, '../src/index.tsx')
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[contenthash:8].js',
  },
  bail: true, // 在构建过程中遇到第一个错误时立即停止构建，并返回错误信息
  // 配置项包名不会被打包，而是直接从window中取（需要将忽略的包在index.html中引入）
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
  splitChunks: {
    chunks: 'all',
    minSize: 20 * 1024, // 20kb
    // 配置maxSize后会让cacheGroups中的模块拆分成更小的颗粒
    // 例如：不配置maxSize，打包产物只有vendors.js、index.js
    // 配置maxSize后，打包产物变成xxx.xxx.js,xxx.xxx.js,xxx.xxx.js等等等很多文件
    // 如果不是必须，无需配置maxSize
    // maxSize: 100 * 1024, // 100kb
    cacheGroups: {
      vendor: {
        name: 'vendors',
        test: /[\\/]node_modules[\\/]/,
        chunks: 'all',
      },
      default: {
        // 非node_modules产物打包后文件名由entry配置决定
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true, // 复用打包好的模块
      },
    },
    
  },
}

// 总结：
1、打包后通过文件内容生成的hash，前后对比有变化的生成新文件，没变化的无需打包成新的js
2、可以将vendors包再继续拆分，比如将react、react-dom、lodash-es等包抽成commons模块（这些包的版本基本上不会做大的改动），进一步优化可以将这些包以cdn形式引入，再打包中忽略，这在大型项目中非常有用

三、常用配置项

{
  mode: 'development',
  devtool: 'source-map', // 作用：报错定位容易，生产环境可由不得你🦊来
  resolve: {
    // 用于导入模块时不需要写出完整的文件名
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, './src'), // 路径别名
    },
  },
  devServer: {
    hot: true,
    port: 3000,
    // 解决history路由刷新页面404问题。
    // Webpack Dev Server 在找不到路由对应的文件时，始终返回 index.html，以保证前端路由可以正确处理。
    historyApiFallback: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
    client: {
      // 配置是否在浏览器中显示编译错误或警告的覆盖层
      overlay: false,
    },
  },
}