官网
功能:前端资源加载、打包工具
命令
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 |