use chunks in dev

webpack.common.js

@@ -8,7 +8,7 @@ const config = {
   entry: path.resolve(__dirname, './index.js'),
   output: {
     path: path.resolve(__dirname, './public'),
-    filename: './index.js',
+    filename: './[name]-[chunkhash].js',
     publicPath: './'
   },
   resolve: {
@@ -47,7 +47,8 @@ const config = {
     new HtmlWebpackPlugin({
       template: 'index.html',
       hash: true,
-      minify: false
+      minify: false,
+      chunks: ['main', 'vendors'],
     }),
     // fix "process is not defined" error:
     new webpack.ProvidePlugin({

webpack.dev.js

@@ -19,5 +19,19 @@ module.exports = merge(common,
     devMiddleware: {
       writeToDisk: true,
     },
+  },
+  optimization: {
+    splitChunks: {
+      maxAsyncRequests: 10,
+      maxInitialRequests: 10,
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendors",
+          priority: 10,
+          chunks: 'all'
+        }
+      }
+    }
   }
 })