基于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, // 100kbcacheGroups: {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,},},
}
