Webpack output - any way to slice the output to chunks? - gulp

Question

I am new to webpack and I love the benefits of using require/import vs. adding multiple script tags in the index.html.
However, I wonder whether there is a way to slice a 13MB output file to chunks so I can have the benefits of the browser's cache like I had with the script-approach.
For instance:
bundle.react.components.js
bundle.utils.js
bundle.redux.reducers.js
That way the loading time of the app will be faster when I make a small change that only affects bundle.utils.js.
Cheers,

Answer 1

// your slicing gulp file
var gulp = require('gulp')
var webpackStream = require('webpack-stream')
var path = require('path')
var webpack = require('webpack')
gulp.task('slice', function () {
return gulp.src('')
.pipe(webpackStream({
entry: {
react_1st: ["react", "react-dom"],
utils_2nd: [
"fixed-data-table"
, "./class_1"
, "./class_2"
, "./constants" ],
remainder_3rd: "./render_component.js" // ReactDOM.render(your_component ...
},
output: {
path: path.join(__dirname, "js"),
filename: "bundle.[name].js",
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ["remainder_3rd", "utils_2nd", "react_1st"],
minChunks: Infinity
}),
]
}))
.pipe(gulp.dest('./'))
})
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="bundle.react_1st.js"></script>
<script src="bundle.utils_2nd.js"></script>
<script src="bundle.remainder_3rd.js"></script>