1.webapck 命令行工具 webpack-cli
webpack-cli 是使用 webpack 的命令行工具,在 4.x 版本之后不再作为 webpack 的依赖了,我们使用时可以 需要单独安装这个工具; 可以实现webpack 无配置使用,在scripte 命令行中直接注入参数
webpack-cli init - 创建一个新的webpack配置。 webpack-cli add - 向webpack配置文件添加新属性。 webpack-cli info - 返回与本地环境相关的信息。 webpack-cli migrate - 将项目从一个版本迁移到另一个版本。 webpack-cli remove - 从webpack配置文件中删除属性。 webpack-cli generate-plugin - 启动新的插件项目。 webpack-cli generate-loader - 启动新的加载器项目。 webpack-cli serve - 将webpack与提供实时重新加载的开发服务器一起使用。 webpack-cli update - 更新复制代码
1.1 自动创建webpack.config.js
使用 npx webpack-cli init
可以通过npx 进行webpack配置文件初始化
npx事npm的包内命令行工具,在项目初始化后,可以直接使用npx 调用项目安装的npm 包,而不需要像npm一样需要携带包路径*
1.2 webpack-cli 无配置打包
a. package.json 创建scripts 命令行 build: webpack --mode development
b. 直接执行 npm run build
Webpack 的打包环境有
production
和development
两种,分别对应生产环境和开发环境,生产环境默认配置包括压缩等常用的配置。设置方式 --mode [模式]
2.webapck 命令行工具
2.1 基础命令
命令 | 描述 |
---|---|
webpack --config example.config.js | 配置文件默认为根目录下的 webpack.config.js ,配置文件默认为 webpack.config.js |
webpack --mode development | 指定打包环境的 mode,取值为,development |
webpack --env.platform=web | 当 webpack 配置对象导出为一个函数时,可以向起传入一个"环境对象(environment)"。 设置 env.platform == "web" |
webpack --env.platform=web | 当 webpack 配置对象导出为一个函数时,可以向起传入一个"环境对象(environment)"。 设置 env.platform == "web" |
webpack --output-path | 输出的路径(在公共路径的基础上) |
webpack --output-filename | 打包文件的文件名 [name].js |
webpack --watch | 观察文件系统的变化 --watch, -w |
webpack --watch-aggregate-timeout=2000 | 指定一个毫秒数,在这个时间内,文件若发送了多次变化,会被合并 |
webpack --watch-poll=2000 | 轮询观察文件变化的时间间隔(同时会打开轮询机制) |
webpack --watch-stdin | 当 stdin 关闭时,退出进程 --watch-stdin, --stdin |
webpack --target='node' | 目标的执行环境 |
webpack --hot=true | 开启模块热替换 |
webpack ---profile | 选项捕获编译时每个步骤的时间信息,并且将这些信息包含在输出中 |
webpack --progress | 打印出编译进度的百分比值 |
webpack --display-error-details | 展示错误细节 |
webpack --json > stats.json | 将打包信息存储到stats.json 文件中 |