Webpack 构建工具速查表
Webpack 是前端最常用的模块打包工具，整理核心配置和常用 Loader/Plugin，快速搭建构建流程。
返回 编程语言核心配置 4
entry: "./src/index.js"入口文件
output: { filename: "bundle.js", path: __dirname + "/dist" }输出配置
mode: "production"模式：development/production/none
devtool: "source-map"Source Map 类型
常用 Loader 4
{ test: /\.css$/, use: ["style-loader", "css-loader"] }CSS 处理
{ test: /\.tsx?$/, use: "ts-loader" }TypeScript 处理
{ test: /\.(png|jpg|gif)$/, type: "asset/resource" }图片处理（Webpack 5）
{ test: /\.js$/, exclude: /node_modules/, use: "babel-loader" }Babel 转译
常用 Plugin 3
new HtmlWebpackPlugin({ template: "./src/index.html" })自动生成 HTML
new MiniCssExtractPlugin({ filename: "[name].css" })CSS 提取为独立文件
new DefinePlugin({ ""prerender"": JSON.stringify("production") })定义环境变量
代码分割 3
optimization: { splitChunks: { chunks: "all" } }自动分割公共代码
import("./module").then(m => m.default)动态导入（路由懒加载）
/* webpackChunkName: "vendor" */魔法注释命名 chunk
💡 提示
- Webpack 5 内置了 asset modules，替代了 file-loader 和 url-loader。
- dev-server 的 hot: true 开启 HMR 热更新，开发体验更好。
- splitChunks 可以按 vendor、common 等策略分割代码，减少首屏加载体积。
- webpack-bundle-analyzer 可以可视化分析打包体积。