Webpack Cheatsheet - Frontend Build Tool Configuration Reference
Webpack 是前端最常用的模块打包工具，核心配置和常用 Loader/Plugin 都在这里了，快速搭建构建流程。
Back to Languages入口与输出 6
entry: "./src/index.js"单入口文件
entry: { app: "./src/app.js", vendor: "./src/vendor.js" }多入口配置
output.filename: "[name].[contenthash].js"输出文件名（带内容 hash）
output.path: path.resolve(__dirname, "dist")输出目录（绝对路径）
output.publicPath: "/assets/"资源公共路径前缀
output.clean: true构建前清理 dist（Webpack 5 内置）
Loader 配置 8
{ test: /\.css$/, use: ["style-loader", "css-loader"] }CSS 内联到 DOM
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"] }CSS 抽离 + PostCSS
{ test: /\.js$/, exclude: /node_modules/, use: "babel-loader" }Babel 转译 JS
{ test: /\.tsx?$/, use: "ts-loader" }TypeScript 处理
{ test: /\.(png|jpg|gif)$/, type: "asset/resource" }图片资源（Webpack 5 asset）
{ test: /\.svg$/, type: "asset/source" }SVG 以字符串内联
{ test: /\.(woff2?|ttf|eot)$/, type: "asset/resource" }字体资源
{ test: /\.(js|ts)$/, enforce: "pre", use: "source-map-loader" }加载已有 source map
Plugin 插件 7
new HtmlWebpackPlugin({ template: "./src/index.html" })自动生成 HTML 文件
new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" })CSS 提取为独立文件
new DefinePlugin({ ""prerender"": JSON.stringify("production") })注入全局环境变量
new CopyWebpackPlugin({ patterns: [{ from: "public", to: "." }] })复制静态文件到 dist
new ProvidePlugin({ _: "lodash" })自动加载模块（无需 import）
new HotModuleReplacementPlugin()HMR 热模块替换插件
new BannerPlugin({ banner: "Built at " + new Date().toISOString() })给输出文件添加头部注释
开发服务器 6
devServer.hot: true开启 HMR 热模块替换
devServer.historyApiFallback: trueSPA history 路由 404 回退到 index
devServer.port: 5000, open: true指定端口并自动打开浏览器
devServer.static: path.join(__dirname, "public")静态资源服务目录
devServer.proxy: { "/api": "http://localhost:3000" }接口代理到后端服务
devServer.proxy: { "/api": { target: "http://localhost:3000", pathRewrite: { "^/api": "" } } }代理并重写路径
优化配置 7
optimization.splitChunks: { chunks: "all" }自动分割公共代码
optimization.minimize: true开启代码压缩
optimization.minimizer: [new TerserPlugin({ extractComments: false })]自定义 JS 压缩器
optimization.runtimeChunk: "single"抽离 runtime 到单独文件
import("./module").then(m => m.default)动态导入（路由懒加载）
/* webpackChunkName: "vendor" */魔法注释命名 chunk
/* webpackPrefetch: true */预取懒加载资源
模式与环境 6
mode: "production" | "development" | "none"三种内置模式
webpack --config webpack.prod.js --mode productionCLI 指定配置与模式
module.exports = (env, argv) => ({ mode: argv.mode })函数式配置读取 argv
devtool: argv.mode === "development" ? "eval-cheap-source-map" : "source-map"按模式切换 source map
const { merge } = require("webpack-merge"); merge(common, prodConfig)合并通用与环境配置
new webpack.EnvironmentPlugin(["NODE_ENV", "API_URL"])批量注入 process.env 变量
构建分析 5
new BundleAnalyzerPlugin({ analyzerMode: "static" })生成静态体积分析报告
stats: "minimal" | "normal" | "detailed"控制构建输出日志详略
performance: { hints: "warning", maxAssetSize: 250000 }资源过大性能提示
webpack --json > stats.json导出构建统计 JSON（可上传分析）
devtool: "source-map" | "eval-cheap-module-source-map"source map 速度与质量权衡
💡 Tips
- Webpack 5 内置了 asset modules，替代了 file-loader 和 url-loader。
- dev-server 的 hot: true 开启 HMR 热更新，开发体验更好。
- splitChunks 可以按 vendor、common 等策略分割代码，减少首屏加载体积。
- webpack-bundle-analyzer 可以可视化分析打包体积。
- production 模式自动开启 Tree Shaking，需使用 ESM（import/export）才能生效。
- [name].[contenthash].js 实现长期缓存，文件内容不变时 hash 不变，命中浏览器缓存。