Webpack 是现代 JavaScript 项目的核心构建工具，通过配置入口、输出、加载器和插件实现资源打包。entry 定义入口文件，支持单入口或多页面应用；output 配置输出路径与文件名；module.rules 使用 loader 处理 CSS、图片等资源；plugins 扩展功能，如 HtmlWebpackPlugin 生成 HTML、CleanWebpackPlugin 清理输出目录。常用优化策略包括设置 mode 为 production 以启用压缩、splitChunks 拆分代码、MiniCssExtractPlugin 提取 CSS 及 DefinePlugin 定义环境变量。插件基于发布-订阅模式，通过挂载 compiler 钩子扩展生命周期，如 emit 钩子可生成文件清单 report。掌握配置与插件机制可显著提升构建效率与维护性。
Webpack 是现代 JavaScript 工程化中不可或缺的构建工具，它能将模块、资源、样式、图片等打包成适合生产环境的静态文件。掌握 Webpack 配置和插件开发，有助于提升项目构建效率与可维护性。
Webpack 核心配置详解
一个典型的 Webpack 配置文件（webpack.config.js）包含入口、输出、加载器（loaders）、插件（plugins）等核心字段：
entry 指定打包入口文件，可以是单个文件或多个入口：
module.exports = {entry: './src/index.js'
};
多页面应用可使用对象语法：
立即学习“Java免费学习笔记（深入）”；
entry: {app: './src/app.js',
admin: './src/admin.js'
}
output 定义输出路径和文件名：
output: {path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
}
module.rules 用于配置加载器，处理不同类型的文件：
module: {rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource'
}
]
}
plugins 扩展 Webpack 功能，如清理目录、注入环境变量、生成 HTML 等：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
常用插件与优化策略
合理使用插件能显著提升构建质量：
- CleanWebpackPlugin：每次构建前清空 dist 目录，避免旧文件残留
- MiniCssExtractPlugin：将 CSS 提取为独立文件，利于缓存
- DefinePlugin：定义全局常量，常用于区分环境
- CopyWebpackPlugin：复制静态资源到输出目录
性能优化方面：
- 启用 mode: 'production' 自动触发压缩和 tree-shaking
- 使用 splitChunks 拆分第三方库和业务代码
- 配置 source-map 控制调试信息精度与构建速度平衡
自定义插件开发原理
Webpack 插件基于发布-订阅模式，通过挂载到编译生命周期钩子实现功能扩展。
一个最简单的插件结构：
class MyPlugin {apply(compiler) {
compiler.hooks.done.tap('MyPlugin', (stats) => {
console.log('构建完成！');
});
}
}
module.exports = MyPlugin;
常见钩子包括：
- compile：编译开始前
- compilation：每次生成编译实例时
- emit：即将输出文件前，可修改 assets
- done：构建完成
例如，创建一个生成构建报告的插件：
apply(compiler) {compiler.hooks.emit.tap('BuildReportPlugin', compilation => {
const filelist = Object.keys(compilation.assets)
.map(filename => `- ${filename}`).join('\n');
compilation.assets['filelist.md'] = {
source: () => filelist,
size: () => filelist.length
};
});
}
该插件在输出阶段添加一个 filelist.md，列出所有生成的文件。
基本上就这些。理解配置逻辑和插件机制，就能灵活应对各种工程需求。
