Webpack Cheatsheet - Frontend Build Tool Configuration Reference
All essential Webpack commands organized by use case, with 45+ entries you can copy and run directly. Find the right command fast when you need it.
Back to LanguagesEntry & Output 6
entry: "./src/index.js"单入口File
entry: { app: "./src/app.js", vendor: "./src/vendor.js" }多入口Configure
output.filename: "[name].[contenthash].js"OutputFile名（带内容 hash）
output.path: path.resolve(__dirname, "dist")OutputDirectory（绝对路径）
output.publicPath: "/assets/"资源公共路径前缀
output.clean: trueBuild前清理 dist（Webpack 5 内置）
Loader Config 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 以string内联
{ test: /\.(woff2?|ttf|eot)$/, type: "asset/resource" }字体资源
{ test: /\.(js|ts)$/, enforce: "pre", use: "source-map-loader" }加载已有 source map
Plugins 7
new HtmlWebpackPlugin({ template: "./src/index.html" })自动生成 HTML File
new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" })CSS 提取为独立File
new DefinePlugin({ ""prerender"": JSON.stringify("production") })注入全局env var
new CopyWebpackPlugin({ patterns: [{ from: "public", to: "." }] })Copy静态File到 dist
new ProvidePlugin({ _: "lodash" })自动加载module（无需 import）
new HotModuleReplacementPlugin()HMR 热moduleReplace插件
new BannerPlugin({ banner: "Built at " + new Date().toISOString() })给OutputFile添加头部注释
Dev Server 6
devServer.hot: true开启 HMR 热moduleReplace
devServer.historyApiFallback: trueSPA history route 404 回退到 index
devServer.port: 5000, open: true指定Port&自动Open浏览器
devServer.static: path.join(__dirname, "public")静态资源ServiceDirectory
devServer.proxy: { "/api": "http://localhost:3000" }interface代理到后端Service
devServer.proxy: { "/api": { target: "http://localhost:3000", pathRewrite: { "^/api": "" } } }代理&重写路径
Optimization Config 7
optimization.splitChunks: { chunks: "all" }自动分割公共代码
optimization.minimize: true开启代码Compress
optimization.minimizer: [new TerserPlugin({ extractComments: false })]自定义 JS Compress器
optimization.runtimeChunk: "single"抽离 runtime 到单独File
import("./module").then(m => m.default)动态Import（route懒加载）
/* webpackChunkName: "vendor" */魔法注释命名 chunk
/* webpackPrefetch: true */预取懒加载资源
Modes & Environments 6
mode: "production" | "development" | "none"三种内置模式
webpack --config webpack.prod.js --mode productionCLI 指定Configure&模式
module.exports = (env, argv) => ({ mode: argv.mode })function式ConfigureRead argv
devtool: argv.mode === "development" ? "eval-cheap-source-map" : "source-map"按模式切换 source map
const { merge } = require("webpack-merge"); merge(common, prodConfig)merge通用&环境Configure
new webpack.EnvironmentPlugin(["NODE_ENV", "API_URL"])batch注入 process.env variable
Build Analysis 5
new BundleAnalyzerPlugin({ analyzerMode: "static" })生成静态体积分析报告
stats: "minimal" | "normal" | "detailed"控制BuildOutput日志详略
performance: { hints: "warning", maxAssetSize: 250000 }资源过大性能prompt
webpack --json > stats.jsonExportBuild统计 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 不变，命中浏览器缓存。
Official References
Commands are compiled from the official docs below. Click to verify the latest usage.
Maintained by LaoHand
Publicly updated on Jul 21, 2026, continuously proofread against official docs.
Found an error? Report it
Wrong command or description? Open an issue to help us fix it.
Found an error? Report it