webpack 命令 #

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，它将根据模块的依赖关系构建一个依赖图，然后将这些模块打包成一个或多个 bundle 文件。

基本命令格式 #

bash 
webpack [options] <entry> [<entry>...]

常用命令行参数 #

基础参数 #

参数 描述 示例
--version, -v 显示 webpack 版本 webpack -v
--help, -h 显示帮助信息 webpack -h
--entry <entry>, -e 指定入口文件 webpack -e ./src/index.js
--output-path <path>, -o 指定输出目录 webpack -o ./dist
--config <file>, -c 指定配置文件 webpack -c ./webpack.config.js

模式参数 #

参数 描述
--mode development 开发模式，启用热模块替换等开发特性
--mode production 生产模式，启用代码压缩等优化特性
--mode none 不启用任何默认优化

监控与开发参数 #

参数 描述
--watch, -w 开启监听模式，文件变化时自动重新打包
--hot, -H 启用热模块替换
--progress 显示打包进度
--display-error-details 显示详细的错误信息

模块与解析参数 #

参数 描述 示例
--module-bind <type>=<loader> 绑定特定类型的文件到 loader webpack --module-bind js=babel-loader
--resolve-extensions <extensions> 指定可解析的文件扩展名 webpack --resolve-extensions .js,.jsx,.json

配置文件使用 #

基本配置文件 #

webpack 默认使用 webpack.config.js 作为配置文件，示例：

javascript 
module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    // 插件配置
  ]
};

使用不同的配置文件 #

bash 
# 使用开发配置
webpack --config webpack.dev.js

# 使用生产配置
webpack --config webpack.prod.js

开发模式命令 #

启用开发服务器 #

bash 
npx webpack serve --mode development

开发服务器常用参数 #

参数 描述
--port <port> 指定服务器端口
--host <host> 指定服务器主机
--open 自动打开浏览器
--hot 启用热模块替换
--compress 启用 gzip 压缩

生产模式命令 #

基本生产构建 #

bash 
webpack --mode production

生产构建优化选项 #

bash 
# 启用多线程构建
webpack --mode production --parallel

# 启用缓存
webpack --mode production --cache

# 生成构建报告
webpack --mode production --profile --json > stats.json

高级命令技巧 #

多入口打包 #

bash 
webpack ./src/page1.js ./src/page2.js -o ./dist

与 npm scripts 结合 #

在 package.json 中配置 scripts：

json 
{
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  }
}

然后使用：

bash 
npm run dev      # 开发模式
npm run build    # 生产构建
npm run watch    # 监听模式

环境变量使用 #

bash 
NODE_ENV=production webpack --mode production

常见错误与解决方案 #

模块未找到错误 #

错误信息：Module not found: Error: Can't resolve 'module-name'

解决方案：

  1. 确保安装了该模块：npm install module-name
  2. 检查导入路径是否正确
  3. 检查 webpack 配置中的 resolve 选项

加载器错误 #

错误信息：You may need an appropriate loader to handle this file type

解决方案：

  1. 安装对应的加载器：npm install loader-name
  2. 在 webpack 配置中添加相应的 loader 规则

内存溢出错误 #

错误信息：JavaScript heap out of memory

解决方案：

  1. 增加 Node.js 内存限制：NODE_OPTIONS=--max-old-space-size=4096 webpack
  2. 优化 webpack 配置，减少模块数量
  3. 使用代码分割减少单个 bundle 大小

总结 #

webpack 命令是前端开发中的核心工具之一，掌握常用命令和参数可以显著提高开发效率。建议结合 package.json 中的 scripts 配置，简化日常开发流程。

最后更新：2026-02-07