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'}}
};

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