核心特性
Webpack 的设计哲学和关键技术特性
模块打包
将JavaScript、CSS、图片等资源视为模块，构建依赖关系图。支持CommonJS、ES Modules、AMD等模块系统。
Loader系统
通过Loader处理非JavaScript文件。支持CSS、图片、字体、TypeScript等各种资源类型。
插件系统
强大的插件系统，扩展Webpack功能。支持代码压缩、环境变量注入、HTML生成等。
代码分割
支持动态导入和代码分割，实现按需加载。优化首屏加载时间，提升用户体验。
生态系统
围绕 Webpack 构建的完整工具链
框架集成
React、Vue、Angular等框架都提供Webpack配置工具。Create React App、Vue CLI等使用Webpack。
开发工具
webpack-dev-server提供热更新开发环境。支持模块热替换(HMR)，提升开发效率。
优化工具
TerserPlugin、CssMinimizerPlugin等优化插件。支持Tree Shaking、代码压缩、资源优化。
CSS处理
css-loader、style-loader、MiniCssExtractPlugin等。支持CSS模块、PostCSS、Sass/Less。
资源管理
file-loader、url-loader、asset modules等。处理图片、字体、媒体等静态资源。
环境配置
支持开发、测试、生产等多环境配置。通过环境变量和配置文件管理不同环境。
快速入门
# 安装Webpack
npm install webpack webpack-cli --save-dev
# 创建Webpack配置
echo 'const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
}
]
}
};' > webpack.config.js
# 创建入口文件
mkdir src
echo 'import "./style.css";
console.log("Hello, Webpack!");' > src/index.js
# 运行Webpack
npx webpack --mode development配置示例
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
clean: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
})
],
optimization: {
splitChunks: {
chunks: 'all'
}
}
};学习资源
与其他构建工具对比
vs Vite
Webpack配置更灵活，生态更成熟。Vite开发服务器更快，配置更简单，适合新项目。
vs Rollup
Webpack适合应用程序打包。Rollup适合库开发，Tree Shaking更好，输出更干净。
vs esbuild
Webpack功能更丰富，配置更灵活。esbuild速度极快，但功能较少，适合简单场景。