本文来源:Webpack 中文指南
前言
Webpack 中文指南中讲了webpack要解决什么问题,如何创建一个简单的Demo,配置文件的使用,常用配置项的作用以及开发工具的使用。
这里把上文未详细讲到的配置项进行扩展。
配置项
安装好 webpack 之后,在命令行中输入 webpack -h
,能够获取到 webpack 的帮助信息,此中包含了 webpack 常用的配置项,以下进行简单的翻译。
命令模式
不使用配置文件的命令模式:webpack
使用配置文件的命令模式:webpack <entry> [<entry>] <output>
配置类选项
命令 | 命令含义 | 属性内容 |
---|---|---|
–config | 配置文件的路径 | [string][默认值:webpack.config.js或webpackfile.js] |
–env | enviroment passed to the config, when it is a function |
基本选项
命令 | 命令含义 | 属性内容 |
---|---|---|
–context | 寻找入口文件和统计的根目录 | [string][默认值:当前目录] |
–entry | 入口文件 | [string] |
–watch,-w | 监听文件系统的文件更改 | [boolean] |
–debug | 将loaders切换到debug模式 | [boolean] |
–devtool | 允许devtool提供更好的debug体验,如–devtool eval-cheap-module-source-map | [string] |
-d | 命令–debug –devtool eval-cheap-module-source-map –output-pathinfo的缩写(便捷方式),生成map映射文件 | [boolean] |
-p | 命令–optimize-minimize –define process.env.NODE_ENV=”production”的缩写,压缩混淆脚本 | [boolean] |
–progress | 用百分比显示编译进度 | [boolean] |
模块选项
命令 | 命令含义 | 属性内容 |
---|---|---|
–module-bind | bind an extension to a loader [string] | |
–module-bind-post | [string] | |
–module-bind-pre | [string] |
输出选项
命令 | 命令含义 | 属性内容 |
---|---|---|
–output-path | 编译产出的输出路径 | [string][默认值:当前目录] |
–output-filename | 输出的文件名 | [string][默认值:[name].js] |
–output-chunk-filename | 附加包的输出文件名 | [string][默认值:filename加上[id]而不是[id]或者[name]前缀] |
–output-source-map-filename | SourceMap的输出文件名 | [srting] |
–output-public-path | 资源的公共目录路径 | [string] |
–output-jsonp-function | 加载附加包的jsonp函数的函数名 | [string] |
–output-pathinfo | 是否保留所有引用模块(require,import,和其他)的注释 | [boolean] |
–output-library | 将入口文件作为库暴露接口 | [string] |
–output-library-target | 暴露的接口类型 | [string] |