webpack入门必知必会(2)

webpack Hash: ab4a1091f0880100eab0 Version: webpack 2.2.0-rc.4 Time: 387ms Asset Size Chunks Chunk Names bundle.js 270 kB 0 [emitted] [big] main [0] ./app/hello.js 50 bytes {0} [built] [1] ./~/jquery/dist/jquery.js 267 kB {0} [built] [2] ./app/index.js 114 bytes {0} [built]

输出的bundle.js整个文件大小为270 kB。

压缩命令：webpack -p

webpack -p Hash: ab4a1091f0880100eab0 Version: webpack 2.2.0-rc.4 Time: 1967ms Asset Size Chunks Chunk Names bundle.js 88.3 kB 0 [emitted] main [0] ./app/hello.js 50 bytes {0} [built] [1] ./~/jquery/dist/jquery.js 267 kB {0} [built] [2] ./app/index.js 114 bytes {0} [built]

输出的bundle.js整个文件大小为88.3 kB。

很明显，文件被压缩了。

7.进一步压缩优化

上方我们通过webpack的压缩命令将文件打包并压缩了，但是对于webpack -p压缩后的文件来说其实还有压缩的余地。如果你使用的是webpack1.0，那么你可以在配置文件中添加plugins配置项，并且加入如下插件：

var webpack = require('webpack'); module.exports = { ... plugins:[ // 去除代码块内的告警语句 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), // 优先考虑使用最多的模块，并为它们分配最小的ID new webpack.optimize.OccurenceOrderPlugin() ] ... }

而本示例中使用的是webpack2.0版本，在2.0中UglifyJsPlugin的compress选项默认为false，并且OccurrenceOrderPlugin默认启用，所以无需进行配置。

结语

本文主要介绍了webpack入门的一些简单命令和基本配置信息，从代码拆分、打包、压缩的角度和传统的前端项目进行对比，希望以此加深大家对webpack基础知识的印象。