es module bundling
with webpack 2
CJ 2017/03/29
F2E&RGBA Meetup 三⽉月號
Slide 2
Slide 2 text
CJies Tan
front end n00b @ iCHEF
cjies.com
Slide 3
Slide 3 text
webpack.js.org
Slide 4
Slide 4 text
webpack v2 stable released
@ Jan 18
Slide 5
Slide 5 text
migrating to v2
https://webpack.js.org/guides/migrating/
Slide 6
Slide 6 text
webpack v2 features
es6 support
tree-shaking
dynamic code-splitting
build performance improvement
https://medium.com/webpack/webpack-2-and-beyond
Slide 7
Slide 7 text
es6 support
no longer transpile import and export statements with babel
["es2015", { "modules": false }]
Slide 8
Slide 8 text
tree-shaking
• popularized by Rich Harris’ module bundler Rollup
• “mark” and drop unused exports
• won’t work with CommonJS require
https://blog.engineyard.com/2016/tree-shaking
https://medium.com/@roman01la/dead-code-elimination-and-tree-shaking-in-javascript-build-systems
Slide 9
Slide 9 text
es ready libraries
webpack 2 or rollup will resolve module first if es6 supported
{
// commonJS entry
"main": "lib/index.js",
// es module entry
"module": "es/index.js"
}
https://gist.github.com/cjies/31b602b53adf22320936663756abd61f
https://github.com/rollup/rollup/wiki/pkg.module