Webpack 打包详细教程

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 和 outputmodule: {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 = `<img src="${logo}" />`;

---

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 进行前端打包了！