Webpack 是一个现代 JavaScript 应用的静态模块打包工具，它可以处理 JavaScript、CSS、图片等资源，并优化它们以提高性能。以下是 Webpack 从基础到进阶的详细教程。
1. Webpack 基础概念
Webpack 的核心概念包括：
Entry（入口）：Webpack 开始打包的起点。Output（输出）：打包后的文件存放路径。Loaders（加载器）：转换非 JavaScript 资源（如 CSS、图片）。Plugins（插件）：扩展 Webpack 功能，如优化、压缩等。Mode（模式）：development（开发模式） 或 production（生产模式）。
2. 安装 Webpack
Webpack 需要 Node.js 环境，安装步骤如下：
# 初始化项目
npm init -y
# 安装 Webpack 及 Webpack CLI（命令行工具）
npm install webpack webpack-cli --save-dev
3. Webpack 配置文件
创建 webpack.config.js 配置文件，基本结构如下：
const path = require('path');
module.exports = {
mode: 'development', // 开发模式
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 打包后文件名
path: path.resolve(__dirname, 'dist') // 输出目录
}
};
4. 运行 Webpack
在 package.json 中添加 scripts 方便运行 Webpack：
"scripts": {
"build": "webpack"
}
执行命令：
npm run build
Webpack 会打包 src/index.js，生成 dist/bundle.js。
5. 配置 Loaders 处理 CSS 和图片
5.1 处理 CSS
Webpack 默认只能处理 JavaScript 代码，使用 css-loader 和 style-loader 处理 CSS：
npm install css-loader style-loader --save-dev
修改 webpack.config.js：
module.exports = {
// 省略 entry 和 output
module: {
rules: [
{
test: /\.css$/, // 处理 CSS 文件
use: ['style-loader', 'css-loader']
}
]
}
};
在 src/index.js 中引入 CSS：
import './styles.css';
5.2 处理图片
使用 file-loader 处理图片：
npm install file-loader --save-dev
修改 webpack.config.js：
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
outputPath: 'images'
}
}
]
}
]
}
};
在 JavaScript 中引入图片：
import logo from './logo.png';
document.getElementById('app').innerHTML = ``;
6. 配置 Plugins 进行优化
6.1 生成 HTML 文件
使用 html-webpack-plugin 自动生成 index.html：
npm install html-webpack-plugin --save-dev
修改 webpack.config.js：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 使用模板
filename: 'index.html'
})
]
};
6.2 清理旧文件
安装 clean-webpack-plugin 以清理旧的打包文件：
npm install clean-webpack-plugin --save-dev
修改 webpack.config.js：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
};
7. 开发服务器 Webpack DevServer
使用 webpack-dev-server 进行热更新：
npm install webpack-dev-server --save-dev
修改 package.json：
"scripts": {
"start": "webpack serve --open"
}
在 webpack.config.js 中添加：
module.exports = {
devServer: {
contentBase: './dist',
hot: true
}
};
运行：
npm start
8. 生产环境优化
8.1 压缩 CSS
使用 mini-css-extract-plugin：
npm install mini-css-extract-plugin css-minimizer-webpack-plugin --save-dev
修改 webpack.config.js：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
mode: 'production',
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [new MiniCssExtractPlugin()],
optimization: {
minimizer: [new CssMinimizerPlugin()]
}
};
8.2 代码分割
启用 splitChunks：
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
9. 完整的 webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.[contenthash].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
outputPath: 'images'
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' })
],
optimization: {
minimizer: [new CssMinimizerPlugin()],
splitChunks: {
chunks: 'all'
}
}
};
10. 结论
通过本教程，你学会了：
Webpack 基础配置处理 CSS、图片等资源使用插件优化项目启用 Webpack DevServer 进行开发生产环境优化（压缩 CSS、代码分割）
掌握这些内容，你就可以高效使用 Webpack 进行前端打包了！