configure html plugin for dev mode

Author: yyx990803

build/setup-dev-server.js

@@ -4,22 +4,32 @@ const MFS = require('memory-fs')
 const clientConfig = require('./webpack.client.config')
 const serverConfig = require('./webpack.server.config')
 
-module.exports = function setupDevServer (app, onUpdate) {
-  // setup on the fly compilation + hot-reload
+module.exports = function setupDevServer (app, opts) {
+  // modify client config to work with hot middleware
   clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
+  clientConfig.output.filename = '[name].js'
   clientConfig.plugins.push(
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
   )
 
+  // dev middleware
   const clientCompiler = webpack(clientConfig)
-  app.use(require('webpack-dev-middleware')(clientCompiler, {
+  const devMiddleware = require('webpack-dev-middleware')(clientCompiler, {
     publicPath: clientConfig.output.publicPath,
     stats: {
       colors: true,
       chunks: false
     }
-  }))
+  })
+  app.use(devMiddleware)
+  clientCompiler.plugin('done', () => {
+    const filename = devMiddleware.getFilenameFromUrl('/dist/index.html')
+    const index = devMiddleware.fileSystem.readFileSync(filename, 'utf-8')
+    opts.indexUpdated(index)
+  })
+
+  // hot middleware
   app.use(require('webpack-hot-middleware')(clientCompiler))
 
   // watch and update server renderer
@@ -32,6 +42,6 @@ module.exports = function setupDevServer (app, onUpdate) {
     stats = stats.toJson()
     stats.errors.forEach(err => console.error(err))
     stats.warnings.forEach(err => console.warn(err))
-    onUpdate(mfs.readFileSync(outputPath, 'utf-8'))
+    opts.bundleUpdated(mfs.readFileSync(outputPath, 'utf-8'))
   })
 }

build/webpack.client.config.js

@@ -18,8 +18,7 @@ const config = Object.assign({}, base, {
     }),
     // extract vendor chunks for better caching
     new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      filename: '[name].[chunkhash].js'
+      name: 'vendor'
     }),
     // generate output HTML
     new HTMLPlugin({

server.js

@@ -14,26 +14,21 @@ const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
 
 const app = express()
 
-// parse index.html template
-const html = (() => {
-  const contentMarker = '<!-- APP -->'
-  const template = fs.readFileSync(resolve('./dist/index.html'), 'utf-8')
-  const i = template.indexOf(contentMarker)
-  return {
-    head: template.slice(0, i),
-    tail: template.slice(i + contentMarker.length)
-  }
-})()
-
 // setup the server renderer, depending on dev/prod environment
-let renderer
+let html, renderer
 if (isProd) {
-  // create server renderer from real fs
+  // create server renderer and index HTML from real fs
   const bundlePath = resolve('./dist/server-bundle.js')
   renderer = createRenderer(fs.readFileSync(bundlePath, 'utf-8'))
+  html = parseIndex(fs.readFileSync(resolve('./dist/index.html'), 'utf-8'))
 } else {
-  require('./build/setup-dev-server')(app, bundle => {
-    renderer = createRenderer(bundle)
+  require('./build/setup-dev-server')(app, {
+    bundleUpdated: bundle => {
+      renderer = createRenderer(bundle)
+    },
+    indexUpdated: index => {
+      html = parseIndex(index)
+    }
   })
 }
 
@@ -46,8 +41,17 @@ function createRenderer (bundle) {
   })
 }
 
+function parseIndex (template) {
+  const contentMarker = '<!-- APP -->'
+  const i = template.indexOf(contentMarker)
+  return {
+    head: template.slice(0, i),
+    tail: template.slice(i + contentMarker.length)
+  }
+}
+
 app.use(compression({ threshold: 0 }))
-app.use('/dist', express.static(resolve('./dist'), { maxAge: 60 * 60 * 24 * 30 }))
+app.use('/dist', express.static(resolve('./dist'), { maxAge: isProd ? 60 * 60 * 24 * 30 : 0 }))
 app.use(favicon(resolve('./src/assets/logo.png')))
 
 app.get('*', (req, res) => {