Webpack + Asset File Name + Server Rendering

Webpack + Asset File Name + Server Rendering.md

Webpack + Asset File Name + Server Rendering

webpack.config.js

import AssetsPlugin from 'assets-webpack-plugin'

// ...

export default {
  // ...
  plugins: [
    // ...
    new AssetsPlugin({ filename: 'dist/assets.json' })
  ],
  // ...
}

server.js

let jsPath
if (process.env.NODE_ENV === 'development') {
  // WEBPACK_SERVER_URL env var points to the webpack-dev-server url (e.g. localhost:9000)
  // this express server runs on a different port in development (e.g. 9001)
  jsPath = `${process.env.WEBPACK_SERVER_URL}/dist/bundle.js`
}
else {
  jsPath = require('../dist/assets.json').main.js
}


// ...

app.get('/*', (req, res, next) => {
  // ...
  
  const reactOutput = ReactDOMServer.renderToString(/*...*/)

  res.render(path.resolve(__dirname, '..', 'views', 'index.ejs'), {
    // all variables like initialState
    jsPath,
    reactOutput
  })
})

app.listen(PORT, /* ... */)

views/index.ejs

<script src="<%= jsPath %>"></script>

<!-- ...  -->

<div id="app"><%- reactOutput %></div>