Выход Webpack - любой способ разрезать вывод на куски?

Question

Я новичок в webpack, и я обожаю преимущества использования require/import по сравнению с добавлением нескольких тегов сценариев в index.html.

Однако, интересно, есть ли способ разрезать выходной файл 13MB на куски, чтобы я мог использовать преимущества кеша браузера, как и у меня с помощью сценария.

Например:

• bundle.react.components.js
• bundle.utils.js
• bundle.redux.reducers.js

Таким образом, время загрузки приложение будет быстрее, когда я сделаю небольшое изменение, которое влияет только на bundle.utils.js.

Приветствия,

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>