webpack于命令行

---
title:webpack于命令行
date: 2018-06-09 16:29:00
updated: 2018-06-10 12:00:00
categories:
- 编程开发
tags:
- webpack
---

使用配置文件

webpack [--config webpack.config.js]

不用配置文件

# webpack <entry> [<entry>] -o <output>
webpack index=./src/index.js entry2=./src/index2.js dist/bundle.js

一些公用选项

# 列出
webpack --help
#2 指定配置文件
--config example.config.js
#2 加载模块文件
--config-register xx

#2 指定报告格式
webpack --json > stats.json

一些环境选项

# 产品环境
webpack --env.production    # sets env.production == true
# 开发环境

# 产品模式
--mode "production"
# 开发模式
--mode "development"

#运行站台
#2 网页
webpack --env.platform=web  # sets env.platform == "web"

一些输出选项

# 其他chunk
--output-chunk-filename
# 输出bundle
--output-filename
# 
--output-jsonp-function

# 到处为类
--output-library
--output-library-target

# 输出目录
--output-path

# 包含注释
--output-pathinfo

# 资源目录
--output-public-path

# 映射位置
--output-source-map-filename

# 
--build-delimiter

#示例
#2 
webpack.js index=./src/index.js index2=./src/index2.js --output-path='./dist' --output-filename='[name][hash].bundle.js' --devtool source-map --output-source-map-filename='[name]123.map'
#2 
webpack index=./src/index.js index2=./src/index2.js --output-path='./dist' --output-filename='[name][hash].bundle.js'

一些调试选项

# 开启调试模式
--debug
# 指定映射类型
--devtool xx
# 显示编译进度
--progress
# 显示错误详情
--display-error-details

一些模块选项

# 绑定文件后缀与前一加载器
--module-bind-pre
# 绑定文件后缀与加载器
--module-bind js=babel-loader
# 绑定文件后缀与下一加载器
--module-bind-post

一些监控选项

# 监控文件变化
--watch
# 指定超时时间
--watch-aggregate-timeout
# 开启轮询功能
--watch-poll
# 退出进程，当标准输入完成后
--watch-stdin

一些优化选项

# chunk数量限制
--optimize-max-chunks
# chunk大小限制
--optimize-min-chunk-size
# 指定优化的插件
--optimize-minimize

一些释放选项

# 定义模块别名
--resolve-alias jquery-plugin=jquery.plugin
# 模块文件后缀
--resolve-extensions .es6 .js .ts
# 指定释放的插件
--resolve-loader-alias

一些状态选项

# 开启颜色模式
--color
# 关闭颜色模式
--no-color
# 选择显示预设
--display
# 显示缓存模块
--display-cached
# 显示缓存资源
--display-cached-assets
# 显示chunk
--display-chunks
# 显示深度：入口到某个依赖模块
--display-depth
# 显示入口
--display-entrypoints
# 显示错误详情
--display-error-details
# 显示排除模块
--display-exclude
# 最多显示几个
--display-max-modules
# 显示所有模块
--display-modules
#
--display-optimization-bailout
# 显示chunk来源
--display-origins
#
--display-provided-exports
# 显示用户导出信息
--display-used-exports
# 隐藏模块信息
--hide-modules
#排序资源文
--sort-assets-by
# 排序chunk文件
--sort-chunks-by
#排序模块文件
--sort-modules-by
#显示更多信息
--verbose

一些高级选项

# 编译出错时终止
--bail
# 开启缓存模式
--cache
# 定义一些变量
--define process.env.NODE_ENV="'development'"
# 开启模块替换
--hot=true
# 使用标签模块插件
--labeled-modules
# 使用实时渲染
--live-reload=true
# 加载某个插件
--plugin
# 预先下拉文件
--prefetch=./files.js
# 声明全局变量
--provide jQuery=jquery
# 
--records-input-path
# 
--records-output-path
#
--records-path
# 指定构建目标
--target='node'

一些简写选项

# 调试
-d
--debug --devtool cheap-module-eval-source-map --output-pathinfo
# 优化
-p
--optimize-minimize --define process.env.NODE_ENV="production"

记录每步耗时

webpack --profile

webpack --progress --profile

参考文献
webpack-offical-cli