webpack使用tree shaking的问题。及关于UglifyJs不支持ES6的解决方案。

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

webpack:

plugins:[
new webpack.optimize.UglifyJsPlugin({
compress:{warning:true}
})
]

是的，一些dead code 在打包后会被移除.比如没用的varible ,function。

但是classes会被UglifyJs作为side effect，然后跳过它。

我的TypeScript配置tsconfig.json :

compilerOptions:{
target:'es5',
module:'es2015'
.....
}

所以~

typescript=>es5 bundle =>UglifyJs

通过这条途径，classes是不会被删除的。

typescript=>es6 bundle =>UglifyJs

这条途径不行，UglifyJs不支持直接处理ES6文件。

------------------------------------------

好吧，搞了很久，我才找到babel为webpack提供了babili-webpack-plugin这么一个插件。

于是用它直接替换 UglifyJs就好了：

npm install babili-wepback-plugin -save-dev // babel-core >= 6.19.0

npm install babel-core@6.21.0

plugins:[
new require('babili-webpack-plugin')()
]

当然，tsconfig.json中target得设置为es2015（按es5输出，classes还是会存在）。

如此才是真正的tree shaking。