feat: webpack-html-plugin

dev/webpack/webpack.common.js

@@ -4,6 +4,9 @@ const webpack = require('webpack')
 
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
 
 const babelConfig = fs.readJsonSync(path.join(process.cwd(), '.babelrc'))
 const postCSSConfig = {
@@ -24,7 +27,7 @@ module.exports = {
     path: path.join(process.cwd(), 'assets'),
     publicPath: '/',
     filename: 'js/[name].js',
-    chunkFilename: 'js/[name].chunk.js',
+    chunkFilename: 'js/[name].js',
     globalObject: 'this'
   },
   module: {
@@ -195,17 +198,37 @@ module.exports = {
     }),
     new MiniCssExtractPlugin({
       filename: 'css/bundle.css',
-      chunkFilename: 'css/[name].chunk.css'
+      chunkFilename: 'css/[name].css'
+    }),
+    new HtmlWebpackPlugin({
+      template: 'dev/templates/master.pug',
+      filename: '../server/views/master.pug',
+      hash: true,
+      inject: 'head'
+    }),
+    new HtmlWebpackPugPlugin(),
+    new ScriptExtHtmlWebpackPlugin({
+      sync: 'runtime.js',
+      defaultAttribute: 'async'
     })
   ],
   optimization: {
     namedModules: true,
+    namedChunks: true,
     splitChunks: {
-      name: 'vendor',
-      minChunks: 2
+      cacheGroups: {
+        default: {
+          minChunks: 2,
+          priority: -20,
+          reuseExistingChunk: true
+        },
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10
+        }
+      }
     },
-    noEmitOnErrors: true,
-    concatenateModules: true
+    runtimeChunk: 'single'
   },
   resolve: {
     mainFields: ['browser', 'main', 'module'],

dev/webpack/webpack.dev.js

@@ -19,7 +19,6 @@ module.exports = merge(common, {
       format: 'compact'
     }),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development'),
       '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
     }),
     new WriteFilePlugin(),

dev/webpack/webpack.prod.js

@@ -1,4 +1,3 @@
-const webpack = require('webpack')
 const merge = require('webpack-merge')
 
 const CleanWebpackPlugin = require('clean-webpack-plugin')
@@ -26,9 +25,6 @@ module.exports = merge(common, {
       root: process.cwd(),
       verbose: false
     }),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
     new OptimizeCssAssetsPlugin({
       cssProcessorOptions: { discardComments: { removeAll: true } },
       canPrint: true