一、基础打包指令
# 基本打包（默认使用 webpack.config.js 配置）
npx webpack
# 指定模式（开发/生产）
npx webpack --mode development # 开发模式（未压缩，保留注释）
npx webpack --mode production # 生产模式（自动压缩、优化）
二、配置文件相关
# 指定自定义配置文件
npx webpack --config 配置文件名.js # 例如：webpack.config.dev.js
# 显示配置信息（调试用）
npx webpack --config 配置文件 --display-config
三、监控与开发服务器
# 监听文件变化，自动重新打包
npx webpack --watch # 简写：npx webpack -w
# 使用 webpack-dev-server 启动开发服务器（需先安装）
npx webpack serve # 启动服务器（默认端口 8080）
npx webpack serve --port 3000 # 指定端口
npx webpack serve --host 0.0.0.0 # 允许外部访问（同局域网设备可访问）
npx webpack serve --open # 自动打开浏览器
npx webpack serve --https # 启用 HTTPS 协议
npx webpack serve --hot # 启用模块热替换（HMR）
四、输出与日志控制
# 显示打包进度
npx webpack --progress
# 显示详细日志（包括模块解析过程）
npx webpack --verbose
# 静默模式（只输出错误信息）
npx webpack --silent
# 输出打包统计信息到文件（用于分析打包内容）
npx webpack --profile --json > stats.json # 生成 stats.json
五、高级参数
# 缓存打包结果（加速二次打包）
npx webpack --cache # 默认开启，可通过配置关闭
# 清理输出目录（删除 dist 中未使用的文件）
npx webpack --clean # 等效于配置 output.clean: true
# 指定目标环境（默认自动识别）
npx webpack --target web # 浏览器环境（默认）
npx webpack --target node # Node.js 环境
# 启用实验性特性（需配合具体特性）
npx webpack --experiments topLevelAwait # 例如：支持顶层 await
六、版本与帮助
# 查看 Webpack 版本
npx webpack --version # 简写：npx webpack -v
# 查看所有指令帮助
npx webpack --help # 简写：npx webpack -h
七、核心配置文件（webpack.config.js）
Webpack 的核心功能通过配置文件（默认 webpack.config.js）定义，配置文件是一个导出对象的 JavaScript 模块。以下是关键配置项及用法：
1. 基础配置
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件（项目打包的起点）
output: {
filename: 'bundle.js', // 输出文件名（可带哈希值：'[name].[contenthash].js'）
path: path.resolve(__dirname, 'dist'), // 输出目录（必须是绝对路径）
clean: true, // 打包前清理 dist 目录（等效于 --clean 指令）
},
mode: 'development', // 模式（'development' / 'production'，可被 CLI 指令覆盖）
};
2. 多入口配置（多页面应用）
module.exports = {
entry: {
home: './src/home.js', // 首页入口
about: './src/about.js', // 关于页入口
},
output: {
filename: '[name].bundle.js', // [name] 会被替换为入口名称（home/about）
path: path.resolve(__dirname, 'dist'),
},
};
3. 模块处理（module）
用于配置不同类型文件的处理规则（通过 loader 转换非 JS 文件）。
module.exports = {
module: {
rules: [
// 处理 CSS 文件（需安装 style-loader、css-loader）
{
test: /\.css$/i, // 匹配 .css 结尾的文件
use: ['style-loader', 'css-loader'], // 从右到左执行：css-loader 解析 CSS -> style-loader 注入到 DOM
},
// 处理图片（需安装 file-loader 或 url-loader）
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: 'asset/resource', // Webpack 5 内置，替代 file-loader
generator: {
filename: 'images/[hash][ext][query]', // 输出到 dist/images 目录
},
},
// 处理 JavaScript（使用 Babel 转译 ES6+，需安装 @babel/core、babel-loader、@babel/preset-env）
{
test: /\.m?js$/,
exclude: /node_modules/, // 排除 node_modules
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'], // 转译 ES6+ 语法
},
},
},
],
},
};
4. 插件（plugins）
用于扩展 Webpack 功能（如生成 HTML、压缩代码等），需先安装对应插件。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成 HTML（需安装）
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 提取 CSS 为单独文件（需安装）
module.exports = {
plugins: [
// 生成 HTML 并自动引入打包后的资源
new HtmlWebpackPlugin({
template: './src/index.html', // 模板文件
filename: 'index.html', // 输出文件名
minify: { collapseWhitespace: true }, // 生产环境压缩 HTML
}),
// 提取 CSS 到单独文件（替代 style-loader，适合生产环境）
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash].css', // 输出到 dist/css 目录
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'], // 用 MiniCssExtractPlugin.loader 替代 style-loader
},
],
},
};
5. 开发工具（devtool）
控制源码映射（Source Map），用于调试（开发环境）或隐藏源码（生产环境）。
module.exports = {
// 开发环境：快速生成，便于调试
devtool: 'eval-cheap-module-source-map',
// 生产环境：不暴露源码（或只生成精简映射）
// devtool: 'source-map' // 完整映射（体积大，适合生产调试）
// devtool: false // 不生成映射（默认生产模式）
};
6. 开发服务器（devServer）
配置 webpack-dev-server 的行为（替代 serve 指令的参数配置）。
module.exports = {
devServer: {
static: './dist', // 静态文件目录
port: 3000, // 端口
host: '0.0.0.0', // 允许外部访问
open: true, // 自动打开浏览器
hot: true, // 启用 HMR
compress: true, // 启用 gzip 压缩
},
};
7. 优化配置（optimization）
用于生产环境的代码优化（压缩、分割、缓存等）。
const TerserPlugin = require('terser-webpack-plugin'); // 压缩 JS（Webpack 5 内置）
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); // 压缩 CSS（需安装）
module.exports = {
optimization: {
minimizer: [
new TerserPlugin(), // 压缩 JS（生产模式默认启用）
new CssMinimizerPlugin(), // 压缩 CSS
],
splitChunks: {
chunks: 'all', // 分割公共代码（如 node_modules 中的依赖）
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors', // 输出为 vendors.bundle.js
chunks: 'all',
},
},
},
runtimeChunk: 'single', // 提取运行时代码（便于长期缓存）
},
};
8. 解析配置（resolve）
配置模块解析规则（如别名、扩展名）。
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'), // 别名：@ 指向 src 目录
},
extensions: ['.js', '.jsx', '.json'], // 省略文件扩展名（import 时可省略）
},
};
八、常用场景配置示例
1. 开发环境配置（webpack.dev.js）
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devtool: 'eval-cheap-module-source-map',
devServer: {
static: './dist',
port: 3000,
hot: true,
open: true,
},
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(png|jpg)$/, type: 'asset/resource' },
],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
2. 生产环境配置（webpack.prod.js）
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: '[name].[contenthash].js', // 带哈希值，便于缓存
path: path.resolve(__dirname, 'dist'),
clean: true,
},
optimization: {
minimizer: [new CssMinimizerPlugin()],
splitChunks: { chunks: 'all' },
},
module: {
rules: [
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
{ test: /\.(png|jpg)$/, type: 'asset/resource' },
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: { collapseWhitespace: true }
}),
new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash].css' }),
],
};