webpack学习笔记
Webpack 是一款现代前端工程化核心工具
模块打包器：原生支持ES Modules/CommonJS等模块规范，构建依赖图谱(dependency graph)实现智能打包
资源处理器：通过Loader系统处理： JavaScript（Babel转译） 、CSS（Sass/Less编译） 图片/字体（优化/Base64转换） 、 现代框架（Vue/React单文件组件）
优化引擎:Tree Shaking（ES6模块静态分析）、Code Splitting（动态加载优化）、Scope Hoisting（作用域提升）、压缩混淆（TerserPlugin）
学习曲线建议：
- 基础配置（entry/output/loader）
- 开发环境配置（devServer/HMR）
- 生产优化（代码分割/缓存策略）
- 自定义插件开发
- 性能调优（构建速度/输出优化）
| 文件类型 | 常用Loader组合 | 典型配置 |
|---|---|---|
| JavaScript | babel-loader + @babel/core | ES6+转译/JSX处理 |
| TypeScript | ts-loader + fork-ts-checker-webpack-plugin | 类型检查加速 |
| CSS | style-loader + css-loader + postcss-loader | 自动前缀/CSS模块 |
| SCSS | sass-loader + css-loader + style-loader | Sass编译 |
| 图片资源 | url-loader + image-webpack-loader | 自动Base64/压缩优化 |
构建分析工具
# 生成分析报告
npx webpack --profile --json > stats.json# 可视化分析工具
npm install --save-dev webpack-bundle-analyzer
基础配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// 开发模式配置mode: 'development',// 入口配置entry: {main: './src/index.js',vendor: ['react', 'react-dom']},// 输出配置output: {filename: '[name].[contenthash].js',path: path.resolve(__dirname, 'dist'),clean: true},// 模块处理规则module: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env', '@babel/preset-react']}}},{test: /\.css$/,use: ['style-loader', 'css-loader', 'postcss-loader']},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource'}]},// 插件系统plugins: [new HtmlWebpackPlugin({template: './public/index.html',favicon: './public/favicon.ico'})],// 开发服务器devServer: {static: './dist',hot: true,historyApiFallback: true,port: 3000},// 优化配置optimization: {splitChunks: {chunks: 'all',cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all'}}}}
};
环境区分
// webpack.config.js
module.exports = (env) => {const isProduction = env.mode === 'production';return {mode: env.mode || 'development',devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',plugins: [new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify(env.mode)})]}
}