Webpack 使用教程
Webpack 是一个功能强大的模块打包器，它可以将各种资源（JavaScript、CSS、图片等）作为模块进行处理和打包。本教程将带你从入门到精通 Webpack 的使用。
一、安装 Webpack
1. 全局安装（不推荐）
npm install webpack webpack-cli -g
2. 项目本地安装（推荐）
首先进入项目目录，然后初始化项目：
# 初始化项目
npm init -y
# 安装 Webpack 作为开发依赖
npm install webpack webpack-cli --save-dev
二、Webpack 核心概念
1. 入口（Entry）
入口是 Webpack 开始构建依赖图的起点。
2. 输出（Output）
输出配置 Webpack 在哪里输出它创建的 bundles，以及如何命名这些文件。
3. 加载器（Loaders）
Loaders 让 Webpack 能够处理非 JavaScript 文件（如 CSS、图片等）。
4. 插件（Plugins）
Plugins 用于执行范围更广的任务，如打包优化、资源管理和环境变量注入。
5. 模式（Mode）
模式有 development、production 和 none 三种，用于设置构建环境。
三、基础配置
1. 创建基本项目结构
my-webpack-project/
├── src/
│ ├── index.js # 入口文件
│ ├── style.css # CSS 文件
│ └── components/ # 组件目录
├── index.html
├── webpack.config.js # Webpack 配置文件
└── package.json
2. 基本配置文件
创建 webpack.config.js 文件：
const path = require('path');
module.exports = {
mode: 'development', // 模式：development 或 production
entry: './src/index.js', // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 输出目录
filename: 'bundle.js', // 输出文件名
clean: true, // 清理旧的输出文件
},
};
3. 配置 package.json 脚本
在 package.json 中添加构建脚本：
{
"name": "my-webpack-project",
"version": "1.0.0",
"scripts": {
"build": "webpack",
"dev": "webpack serve --open"
},
"devDependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.0"
}
}
四、加载器配置
1. 处理 CSS
安装所需 loader：
npm install style-loader css-loader --save-dev
在 webpack.config.js 中配置：
module.exports = {
// ... 其他配置
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'], // 从右到左执行
},
],
},
};
2. 处理 SCSS/SASS
安装所需 loader：
npm install sass-loader sass --save-dev
配置：
module.exports = {
// ... 其他配置
module: {
rules: [
// ... 其他规则
{
test: /\.(scss|sass)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
};
3. 处理图片
module.exports = {
// ... 其他配置
module: {
rules: [
// ... 其他规则
{
test: /\.(png|jpg|gif|svg)$/i,
type: 'asset/resource', // Webpack 5 内置资源模块
},
],
},
};
4. 处理 JavaScript（使用 Babel）
安装所需依赖：
npm install babel-loader @babel/core @babel/preset-env --save-dev
配置：
module.exports = {
// ... 其他配置
module: {
rules: [
// ... 其他规则
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};
五、插件配置
1. HtmlWebpackPlugin
自动生成 HTML 文件并注入打包后的脚本。
安装：
npm install html-webpack-plugin --save-dev
配置：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ... 其他配置
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack App',
template: './index.html', // 使用自定义模板
minify: {
collapseWhitespace: true, // 压缩空白
},
}),
],
};
2. MiniCssExtractPlugin
将 CSS 提取到单独的文件中。
安装：
npm install mini-css-extract-plugin --save-dev
配置：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// ... 其他配置
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'], // 替换 style-loader
},
],
},
plugins: [
// ... 其他插件
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
],
};
六、开发服务器配置
1. 安装 webpack-dev-server
npm install webpack-dev-server --save-dev
2. 配置开发服务器
module.exports = {
// ... 其他配置
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 9000,
hot: true, // 启用热模块替换
open: true, // 自动打开浏览器
},
};
七、代码分割
1. 手动代码分割
module.exports = {
// ... 其他配置
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
};
2. 动态导入
在代码中使用动态导入实现按需加载：
// 动态导入模块
button.addEventListener('click', async () => {
const module = await import('./heavy-module.js');
module.doSomething();
});
八、生产环境优化
1. 优化配置
module.exports = {
mode: 'production',
// ... 其他配置
optimization: {
minimize: true,
minimizer: [
// 可以配置自定义的压缩插件
],
splitChunks: {
chunks: 'all',
},
runtimeChunk: 'single',
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
},
};
2. Source Maps
开发环境使用：
module.exports = {
// ... 其他配置
devtool: 'eval-cheap-module-source-map',
};
生产环境使用：
module.exports = {
// ... 其他配置
devtool: 'source-map',
};
九、完整的配置示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
clean: true,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.css$/,
use: [
process.env.NODE_ENV === 'production'
? MiniCssExtractPlugin.loader
: 'style-loader',
'css-loader',
],
},
{
test: /\.(png|jpg|gif|svg)$/i,
type: 'asset/resource',
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack App',
template: './index.html',
minify: process.env.NODE_ENV === 'production' ? {
collapseWhitespace: true,
} : false,
}),
...(process.env.NODE_ENV === 'production' ? [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
] : []),
],
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
},
},
},
runtimeChunk: 'single',
},
devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'eval-cheap-module-source-map',
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 9000,
hot: true,
open: true,
},
};
十、使用命令
1. 开发环境
npm run dev
2. 生产构建
npm run build
十一、常见问题与解决方案
1. 模块找不到
确保正确安装了依赖，并检查路径是否正确。
2. Loader 问题
确保安装了所有必需的 loader，并正确配置了 rules。
3. 性能问题
对于大型项目，可以：
- 使用代码分割
- 优化 loader 配置（使用 include/exclude）
- 使用缓存
- 考虑使用 DllPlugin
十二、总结
Webpack 是一个强大而灵活的打包工具，通过本教程，你应该已经掌握了 Webpack 的基本配置和使用方法。随着项目需求的变化，你可以进一步探索 Webpack 的高级功能，如自定义插件、更复杂的代码分割策略等。
