此命令生成一个webpack项目

  1. # 此命令生成一个webpack项目
  2. # npx webpack init [generation-path] [options]
  3. npx webpack init ./my-app --template=default
  5. my-app
  6. ├── src
  7. │   └── index.js # runs on server only
  8. ├── webpack.config.js
  9. ├── index.html
  10. ├── README.md
  11. ├── package-lock.json
  12. └── package.json
  14. # 按制定配置文件 编译，并告诉 webpack 如何处理 stats
  15. # npx webpack build [options]
  16. npx webpack build --config ./webpack.config.js --stats verbose

输出系统信息

  1. # 输出系统信息
  2. npx webpack info --output=json
  3. npx webpack info --output=markdown
  5. {
  6.   "System": {
  7.     "OS": "macOS 11.5.1",
  8.     "CPU": "(8) arm64 Apple M1",
  9.     "Memory": "837.64 MB / 16.00 GB"
  10.   },
  11.   "Binaries": {
  12.     "Node": {
  13.       "version": "16.5.0",
  14.       "path": "~/.nvm/versions/node/v16.5.0/bin/node"
  15.     },
  16.     "Yarn": {
  17.       "version": "1.22.10",
  18.       "path": "/opt/homebrew/bin/yarn"
  19.     },
  20.     "npm": {
  21.       "version": "7.19.1",
  22.       "path": "~/.nvm/versions/node/v16.5.0/bin/npm"
  23.     }
  24.   },
  25.   "Packages": {
  26.     "webpack": {
  27.       "installed": "5.52.1",
  28.       "wanted": "^5.52.1"
  29.     },
  30.     "webpack-cli": {
  31.       "installed": "4.8.0",
  32.       "wanted": "^4.8.0"
  33.     }
  34.   }
  35. }
  37. ## System:
  38.  - OS: macOS 11.5.1
  39.  - CPU: (8) arm64 Apple M1
  40.  - Memory: 529.73 MB / 16.00 GB
  41. ## Binaries:
  42.  - Node: 16.5.0 - ~/.nvm/versions/node/v16.5.0/bin/node
  43.  - Yarn: 1.22.10 - /opt/homebrew/bin/yarn
  44.  - npm: 7.19.1 - ~/.nvm/versions/node/v16.5.0/bin/npm
  45. ## Packages:
  46.  - webpack: ^5.52.1 => 5.52.1 
  47.  - webpack-cli: ^4.8.0 => 4.8.0

初始化一个 loader 示例项目

  1. # npx webpack loader [output-path] [options]
  2. npx webpack loader ./my-loader --template=default

生成一个plugin的示例项目

  1. # 生成一个plugin的示例项目
  2. # npx webpack plugin [output-path] [options]
  3. npx webpack plugin ./my-loader --template=default
  1. # 检查webpack配置
  2. npx webpack configtest ./webpack.config.js
  4. [webpack-cli] Validate '/Users/xxx/project/test/webpack-demo/webpack.config.js'.
  5. [webpack-cli] There are no validation errors in the given webpack configuration.
  7. # 运行 webpack 开发服务器。
  8. # npx webpack serve [options]
  9. npx webpack serve --static --open
  11. # webpack watch 监听文件变化
  12. # npx webpack watch [options]
  13. npx webpack watch --mode development
  15. npx webpack --version
  16. npx webpack --help
  17. npx webpack info --version
  19. # 以 JSON 格式输出 webpack 的运行结果
  20. npx webpack --json
  21. # 如果你想把 stats 数据存储为 JSON 而非输出
  22. npx webpack --json stats.json
  24. # 查看编译进度
  25. npx webpack --progress
  26. npx webpack --progress=profile
  28. # 将 CLI 参数传递给 Node.js
  29. NODE_OPTIONS="--max-old-space-size=4096" webpack

合并多个配置文件

  1. npx webpack --config ./first.js --config ./second.js --merge

输出 compilation文件

https://webpack.docschina.org/api/stats/

  1. # --json=compilation-stats.json 标志告诉 
  2. # webpack 生成一个包含依赖关系图和其他各种构建信息的 compilation-stats.json 文件。
  3. # 通常情况下，--profile 标志也会被添加，这样的话每个 module objects ，
  4. # 都会增加一个 profile 部分，它包含了特定模块的统计信息。
  6. npx webpack --profile --json=compilation-stats.json