构建生态工具篇Webpack：Webpack配置
2020-10-08 10:58:10
这是一个完整的Webpack配置示例，涵盖了生产环境构建的主要配置项。以下是对关键配置的解析：
核心配置说明模式与入口
mode: 'production'：设置为生产模式，自动启用优化
多入口配置：main和vendor两个入口文件
输出配置
[name].[contenthash].js：使用内容哈希实现长效缓存
publicPath: '/'：设置资源引用基础路径
模块解析
支持多种文件扩展名（.js/.jsx/.ts/.tsx等）
路径别名配置（@、@components等）提升导入可读性
加载器规则
JS/TS处理：Babel和TypeScript加载器
样式处理：
CSS：MiniCssExtractPlugin + css-loader + postcss-loader
SCSS：额外添加sass-loader
资源文件：使用Webpack 5的asset模块处理图片和字体
关键插件
CleanWebpackPlugin：构建前清理dist目录
HtmlWebpackPlugin：自动生成HTML并注入资源
MiniCssExtractPlugin：提取CSS为独立文件
DefinePlugin：定义环境变量
BundleAnalyzerPlugin：可视化分析包大小
代码分割
splitChunks智能拆分：
分离node_modules中的第三方库
按模块大小阈值（20KB-70KB）拆分
自定义命名规则（包含包名）
压缩优化
JS压缩：TerserPlugin（移除console）
CSS压缩：CssMinimizerPlugin
单独的运行时文件（runtimeChunk）
性能控制
关闭性能提示（生产环境常用）
设置资源大小阈值（512KB）
DevServer
端口3000 + 热更新
历史API回退（支持SPA路由）
API代理配置（/api转发到4000端口）
Source Map
生产环境使用source-map（可根据需要改为hidden-source-map）
统计信息
精简控制台输出（隐藏模块级信息）
外部依赖
通过externals排除CDN引入的jQuery
目标环境
明确指定web目标
生产构建
webpack --config webpack.config.js开发调试
启动开发服务器：webpack serve
根据项目需要调整：
增加CopyWebpackPlugin处理静态文件
添加ProgressPlugin显示构建进度
配置Pug/EJS等模板引擎支持
环境区分：
建议通过webpack-merge拆分开发/生产配置
使用.env文件管理环境变量
这个配置提供了企业级应用世源的完整构建方案，特别适合中大纳罩型React/Vue项目，通过代码分割和长效缓存机制优搜茄态化加载性能，同时保持了良好的开发体验。
热门标签
