Webpack学习杂记

本文来源: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]