feat: webpack-html-plugin

dev/templates/master.pug

+doctype html
+html
+  head
+    meta(http-equiv='X-UA-Compatible', content='IE=edge')
+    meta(charset='UTF-8')
+    meta(name='viewport', content='user-scalable=yes, width=device-width, initial-scale=1, maximum-scale=5')
+    meta(name='theme-color', content='#333333')
+    meta(name='msapplication-TileColor', content='#333333')
+    meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
+    title= config.site.title
+
+    //- Favicon
+    each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
+      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
+    link(rel='icon', type='image/png', sizes='192x192', href='/favicons/android-icon-192x192.png')
+    each favsize in [32, 96, 16]
+      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
+    link(rel='manifest', href='/manifest.json')
+
+    //- Site Lang
+    script.
+      var siteConfig = !{JSON.stringify(config.site)}
+
+    //- CSS
+    link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Roboto:400,500,700|Source+Code+Pro:400,700|Material+Icons')
+    link(type='text/css', rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css')
+
+    block head
+
+  body
+    block body

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

-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

package.json

@@ -175,6 +175,8 @@
     "graphiql": "0.11.11",
     "graphql-tag": "^2.8.0",
     "hammerjs": "2.0.8",
+    "html-webpack-plugin": "3.0.6",
+    "html-webpack-pug-plugin": "0.3.0",
     "i18next-xhr-backend": "1.5.1",
     "ignore-loader": "0.1.2",
     "jest": "22.4.2",
@@ -190,11 +192,13 @@
     "postcss-loader": "2.1.1",
     "postcss-selector-parser": "3.1.1",
     "pug-lint": "2.5.0",
+    "pug-loader": "2.3.0",
     "raw-loader": "0.5.1",
     "react": "16.2.0",
     "react-dom": "16.2.0",
     "sass-loader": "6.0.7",
     "sass-resources-loader": "1.3.3",
+    "script-ext-html-webpack-plugin": "2.0.1",
     "simple-progress-webpack-plugin": "1.1.2",
     "style-loader": "0.20.3",
     "stylus": "0.54.5",

server/views/master.pug

@@ -24,11 +24,11 @@ html
     //- CSS
     link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Roboto:400,500,700|Source+Code+Pro:400,700|Material+Icons')
     link(type='text/css', rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css')
-    link(type='text/css', rel='stylesheet', href='/css/bundle.css')
-
-    //- JS
-    script(type='text/javascript', src='/js/client.js')
 
     block head
 
+    link(href="/css/client.css?89183d15bb0e30aac49f" rel="stylesheet")
+    script(type="text/javascript" src="/js/runtime.js?89183d15bb0e30aac49f")
+    script(type="text/javascript" src="/js/client.js?89183d15bb0e30aac49f" async)
+  body
     block body