webpack尝鲜

安装v4.0.0-beta.0

yarn add webpack@next webpack-cli --dev

或者javascript

npm install webpack@next webpack-cli --save-dev

测试例子

建立文件:
图片描述java

运行结果:
图片描述webpack

哪些新特性

1 不在须要设置配置文件(如上例子)
默认入口文件为./src 默认输出文件为./dist
2 能够选择两种模式:生产模式和开发模式git

图片描述
图片描述

能够看到,开发模式构建花的时间更少,最终的main.js文件更大;而生成模式构建时间更长,最终的main.js文件更小。github

生产模式:作了各类类型的优化:压缩,做用域提高等,默认包含了须要手动加入的插件,好比NoEmitOnErrorsPlugin
开发模式:提升了构建速度,输出文件(main.js)更易阅读(自动包含了文件路径名等)web

增长了sideEffects配置

在你要导入的库的package.json中增长sideEffects:false配置
demo查看npm

JSON支持和Tree Shaking(无用代码清除)

经过Es6语法导入JSON时,webpack会自动去除没有使用的exports。json

升级到UglifyJS2

意味着能够使用ES6语法而且能压缩它(而无需转换)ide

干掉了CommonsChunkPlugin配置

查看具体说明测试

更多看: webpack官方

图片描述

相关文章
相关标签/搜索