webpack相关

一、基础打包指令

# 基本打包（默认使用 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-loadergenerator: {filename: 'images/[hash][ext][query]', // 输出到 dist/images 目录},},// 处理 JavaScript（使用 Babel 转译 ES6+，需安装 @babel/core、babel-loader、@babel/preset-env）{test: /\.m?js$/,exclude: /node_modules/, // 排除 node_modulesuse: {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, // 启用 HMRcompress: 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.jschunks: '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' }),],
};