Created by: neeharv
HACK ALERT. This is an extremely WIP hacky way to do split builds into ES6
and ES5
builds, as described in https://github.com/facebookincubator/create-react-app/issues/3125. I am simply putting this up to spark discussion on the right way to do this.
This works by -
- Turning
webpack.prod.js
into a factory function that takes intarget
and returns different configs with varying targets - We suffix the
module
build assets with.es6.js
(this can be moved to config easily) - For the
ES6
build, we don't include polyfills - We get 2 asset-manifests this way, and hence 2 different service workers that load the relevant built code
- Switch over to
"uglifyjs-webpack-plugin": "^1.0.0-beta.2"
so we can minify theES6
code - It currently only spits out the
ES6
build only in this PR, because the HtmlWebpackPlugin looks at webpack's stats file to generate the variables for the template. I have a local version of HtmlWebpackPlugin that reads the assets of both builds and makes them available for the template, but that is beyond the scope of this and an extremely bad way of doing things
An alternate to this would be to somehow get webpack to accept two different loader configurations for two different entry points, in the same build. AFAIK, this is what @geelen was trying and webpack today doesn't support this. Hence the above approach of running two parallel builds and then using a custom templating job to add the asset names of the ES5
and the ES6
code to the output html.