webpack2，升还是不升？

[sorrycc]

在 webpack2.2 即将发布 之际，我们来看下 webpack2 有哪些新特性。至于是否升级，大家心里应该有自己的打算吧。

优势

感觉 webpack2 最大的改进是 ES6 modules 和 Tree Shaking，其他都是配置方面的。

native ES6 import, export

用的时候注意要把 babel-preset-es2015 的 modules 关掉：

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

Tree Shaking for ES6

这一特性通过 babel 插件的方式已可实现，比如 babel-plugin-import， babel-plugin-lodash ，所以现在开来已不觉得惊艳了。另外，他需要 npm 包的额外支持，打出一份 ES6 Module 的文件。

Needs Promise polyfill in old browsers

输出多 chunk 时需提供 promise-polyfill 。

webpack config can return a Promise

提供异步的 webpack 配置方式。

劣势

劣势挺明显，社区、文档、性能，每样都是痛点。

社区

插件和 loader 社区需要一段时间的适配。比如 ericclemmons/npm-install-webpack-plugin 目前还不支持 webpack2 。

文档

官方文档 看起来还不错，不过大部分人遇到 webpack 配置问题，通常会去 stackoverflow 等问答社区搜，而这些社区在 webpack2 还很少有积累，估计很难找到答案。

性能

把 roadhog 尝试 升级到 webpack2，并以 dva-example-user-dashboard 为例，比较了下 webpack1 和 webpack2 的性能，如下：

	webpack1	webpack2
roadhog server	9s	14s
roadhog build	18s	19s
roadhog build --debug (不压缩)	9s	14s

慢了不是一点点。。

结论

暂不升级，等 webpack2 社区完善以及性能提升吧。

参考

• Migrating from v1 to v2
• What's new in webpack 2 · GitHub
• WIP migrate to webpack2 by sorrycc · Pull Request #83 · sorrycc/roadhog · GitHub
• Webpack roadmap

(完)

[jin5354]

webpack1 有一个常见而致命的问题是开启了 uglifyJS 插件之后会同时压缩 CSS，导致莫名其妙的 CSS 异常，例如 px2rem 插件转换出来的部分 [dpr] 开头的规则会直接被吃掉。除了升级到 webpack 2 没有其他更好的解法。现在生产环境已经在用 webpack2 一个月了，感觉还算稳定。

[lijialiang]

不支持 IE8 怎么破？

[sorrycc]

例如 px2rem 插件转换出来的部分 [dpr] 开头的规则会直接被吃掉。

应该可以调整 CSS 压缩参数吧。

[nimoc]

@jin5354

rem 我是用less 或 sass 中的函数来计算的,webpack1 里面没遇到压缩问题。

@import "./rem";
.demo {
    width:rem(640);
    height:rem(100);
    box-shadow: rem(11) rem(22) rem(33) pink;
    background: #eee;
}

https://github.com/fast-flow/lessrem

[jin5354]

@sorrycc 只有 webpack2 才 fix 了这个问题 见 webpack/webpack#283
@nimojs rem 转换是没问题的，px2rem 插件中的 px 模式会生成与屏幕 dpr 相关的 css 规则，这些形如 [data-dpr="1"] 的规则会被去掉导致异常，见 https://www.npmjs.com/package/px2rem#example

[joesonw]

@jin5354 https://www.npmjs.com/package/uglify-loader 这样不就可以只给JS压缩了吗?

[jin5354]

@joesonw 赞，看起来确实是一个解决方法。不过我已经升级到2了，就不回退了。

[Shyam-Chen]

Rollup!