Webpack

官网
功能：前端资源加载、打包工具

命令

install：安装（简写 i）
uninstall：卸载

安装命令

命令	解析	备注
1.安装时候用到的命令
npm init	初始化npm	初始化完成后可以看到一个生成一个package.json文件
npm install webpack -g	全局安装	有权限问题的话需要以管理员身份运行命令
npm install webpack@版本号 -g	全局安装指定版本号	eg:npm install webpack@1.15.0 -g
npm install webpack –save-dev	局部安装
npm install webpack@版本号 -save-dev	指定版本号局部安装
打包时候用到的命令
webpack XX YY	XX:打包文件的名称 YY：打包生成后文件的名称	eg: webpack hello.js bundle.js
打包时候的常用参数
–watch	自动打包
–progress	显示打包过程
–display-modules	显示打包过程引用的模块
–display-reason	显示为什么打包该模块

常用的模块

命令	解析	备注
npm install css-loader style-loader –save-dev	打包css文件
extract-text-webpack-plugin	css单独打包
file-loader	处理文件（图片）	$1
url-loader	are neat	$1
hogan.js	代码模块化	$1
webpack-dev-server	are neat	$1
html-loader	引用html	$1
html-webpack-plugin	处理html模板	$1

npm install font-awesome –save

打包过程反馈字段解析

字段	解析	备注
Hash	哈希值
Version	webpack版本
Time	打包所花费的时间
Asset	打包生成的文件
Size	生成文件的大小
Chunks	打包的分块
Chunk Names	打包的块名称

–save-dev:npm会把包版本和名称的信息存放到package.json文件中”devDependencies”，这样就能记录文件的依赖；开发时的辅助工具，不会被打包进业务代码（测试工具，打包工具）
–save:package.json文件中“description”。放的是业务代码的依赖。

webpack配置文件webpack.config.js重要的字段

字段	解析	Cool
entry	js的入口文件	$1600
external	外部依赖的生明	$12
output	目标文件	$1
resolve	配置别名	$1
module	各种文件，各种loader	$1
plugins	插件	$1
zebra stripes	are neat	$1
zebra stripes	are neat	$1

常用的Loader

加载的文件类型	Loadee	Cool
HTML	html-webpack-plugin/html-loader	官网解析
JS	babel-loader+babel-preset-es2015	$12
csss	style-loader+css-loader	$1
image=font	url-loader	$1
module	各种文件，各种loader	$1
plugins	插件	$1
zebra stripes	are neat	$1
zebra stripes	are neat	$1