Closes #1, enables HMR. Style HMR is not supported in Webpack 4 yet, but MiniCssExtractPlugin has plan to support it. See webpack-contrib/mini-css-extract-plugin#34

Author: applefreak

app/main.js

@@ -1,3 +1,11 @@
 import app from './routes'
 
+app.use((state, emitter) => {
+  state.count = 0
+})
+
 app.mount('body')
+
+if (module.hot) {
+  module.hot.accept()
+}

package-lock.json

@@ -10,7 +10,11 @@
     "prod": "NODE_ENV=production node ./server/prod.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": ["choo", "ssr", "express"],
+  "keywords": [
+    "choo",
+    "ssr",
+    "express"
+  ],
   "author": "Poyu Chen <[email protected]>",
   "license": "MIT",
   "repository": {
@@ -27,7 +31,7 @@
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.7.0",
     "css-loader": "^0.28.11",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "mini-css-extract-plugin": "^0.4.0",
     "val-loader": "^1.1.0",
     "webpack": "^4.12.0",
     "webpack-cli": "^3.0.6",

package.json

@@ -1,6 +1,6 @@
 const path = require('path')
 const webpack = require('webpack')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 const ManifestPlugin = require('webpack-manifest-plugin')
 
 const babelOptions = {
@@ -15,7 +15,7 @@ module.exports = {
     style: './app/main.css'
   },
   output: {
-    filename: '[name].[chunkhash:8].js',
+    filename: '[name].[hash:8].js',
     path: path.resolve(__dirname, 'dist')
   },
   module: {
@@ -31,14 +31,10 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          use: [
-            {
-              loader: 'css-loader',
-              options: { modules: false, importLoaders: 1 }
-            }
-          ]
-        })
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader'
+        ]
       },
       {
         // loads all assets from assets/ for use by common/assets.js
@@ -48,12 +44,15 @@ module.exports = {
     ]
   },
   plugins: [
-    new ExtractTextPlugin({
-      filename: 'style.[hash:8].css'
+    new MiniCssExtractPlugin({
+      filename: 'style.[chunkhash:8].css'
     }),
+    new webpack.NamedModulesPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
     new ManifestPlugin()
   ],
   devServer: {
-    before: require('./server/dev')
+    before: require('./server/dev'),
+    hot: true
   }
 }