服务端渲染webpack配置和服务端入口配置

Author: Terence-Cheng

Diff for: build/webpack.base.js

@@ -1,7 +1,6 @@
 const path = require('path')
 const webpack = require('webpack')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const CleanWebpackPlugin = require('clean-webpack-plugin')
 
 module.exports = {
   output: {
@@ -84,7 +83,6 @@ module.exports = {
     ]
   },
   plugins: [
-    new CleanWebpackPlugin(['dist']),
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional

Diff for: build/webpack.base.server.js

@@ -0,0 +1,24 @@
+const path = require('path')
+const webpack = require('webpack')
+const webpackMerge = require('webpack-merge')
+const baseConfig = require('./webpack.base')
+const config = require('../config')
+
+const serverPort = config.server.port
+
+module.exports = webpackMerge(baseConfig, {
+  target: 'node',
+  entry: {
+    app: path.join(__dirname, '../client/server-entry.js')
+  },
+  externals: Object.keys(require('../package.json').dependencies),
+  output: {
+    filename: 'server-entry.js',
+    libraryTarget: 'commonjs2'
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.API_BASE': JSON.stringify('http://127.0.0.1:' + serverPort)
+    })
+  ]
+})

Diff for: build/webpack.dev.server.js

@@ -1,25 +1,20 @@
 const path = require('path')
-const webpack = require('webpack')
 const webpackMerge = require('webpack-merge')
-const baseConfig = require('./webpack.base')
+const baseConfig = require('./webpack.base.server')
 const config = require('../config')
 
-const serverPort = config.server.port
-
 module.exports = webpackMerge(baseConfig, {
   mode: 'development',
-  target: 'node',
-  entry: {
-    app: path.join(__dirname, '../client/server-entry.js')
-  },
-  externals: Object.keys(require('../package.json').dependencies),
-  output: {
-    filename: 'server-entry.js',
-    libraryTarget: 'commonjs2'
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env.API_BASE': JSON.stringify('http://127.0.0.1:' + serverPort)
-    })
-  ]
+  devServer: {
+    host: '0.0.0.0',
+    compress: true,
+    port: process.env.PORT || config.dev.serverPort,
+    contentBase: path.join(__dirname, '../dist'),
+    hot: true,
+    overlay: {
+      errors: true
+    },
+    publicPath: '/server-public/',
+    disableHostCheck: true
+  }
 })

Diff for: build/webpack.prod.server.js

@@ -1,5 +1,5 @@
 const webpackMerge = require('webpack-merge')
-const baseConfig = require('./webpack.dev.server')
+const baseConfig = require('./webpack.base.server')
 
 module.exports = webpackMerge(baseConfig, {
   mode: 'production'

Diff for: config/index.js

@@ -1,7 +1,8 @@
 
 module.exports = {
   dev: {
-    port: 8282
+    port: 8282,
+    serverPort: 8383
   },
   server: {
     port: 3278

Diff for: package.json

@@ -4,9 +4,11 @@
   "description": "react redux 服务端渲染（同构）",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack-dev-server --config build/webpack.dev.client.js",
+    "dev:client": "npm run clear && webpack-dev-server --config build/webpack.dev.client.js",
+    "dev:server": "npm run clear && webpack-dev-server --config build/webpack.dev.server.js",
     "start": "nodemon server/server.js",
-    "build": "webpack --config build/webpack.prod.client.js && webpack --config build/webpack.prod.server.js"
+    "build": "npm run clear && webpack --config build/webpack.prod.client.js && webpack --config build/webpack.prod.server.js",
+    "clear": "rimraf dist"
   },
   "repository": {
     "type": "git",
@@ -60,7 +62,6 @@
     "babel-preset-es2015-loose": "^8.0.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
-    "clean-webpack-plugin": "^0.1.19",
     "cross-env": "^5.1.1",
     "css-loader": "^0.28.11",
     "eslint": "^4.19.1",
@@ -87,6 +88,7 @@
     "node-sass": "^4.9.0",
     "nodemon": "^1.17.4",
     "react-hot-loader": "^3.1.3",
+    "rimraf": "^2.6.2",
     "sass-loader": "^7.0.1",
     "sass-resources-loader": "^1.3.3",
     "style-loader": "^0.21.0",

Diff for: server/server.js

@@ -12,7 +12,7 @@ const app = express()
 app.use(bodyParser.json())
 app.use(bodyParser.urlencoded({ extended: false }))
 
-if (true || !isDev) {
+if (!isDev) {
   const serverEntry = require('../dist/server-entry')
   const template = fs.readFileSync(path.join(__dirname, '../dist/server.ejs'), 'utf8')
   app.use('/public', express.static(path.join(__dirname, '../dist'), {

Diff for: server/util/dev-static.js

@@ -0,0 +1,90 @@
+const axios = require('axios')
+const NativeModule = require('module')
+const vm = require('vm')
+const webpack = require('webpack')
+const MemoryFs = require('memory-fs')
+const path = require('path')
+const proxy = require('http-proxy-middleware')
+const globalConfig = require('../../config')
+const serverConfig = require('../../build/webpack.dev.server')
+const serverRender = require('./server-render')
+
+const { port: clientDevPort } = globalConfig.dev
+
+const getTemplate = () => new Promise((resolve, reject) => {
+  axios.get(`http://localhost:${clientDevPort}/public/server.ejs`)
+    .then(res => {
+      resolve(res.data)
+    })
+    .catch(reject)
+})
+
+/* const getServerEntry = new Promise((resolve, reject) => {
+  axios.get(`http://localhost:${serverPort}/server-public/server-entry.js`, {
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+    .then(res => {
+      console.log('server-entry.js')
+      resolve(res.data)
+    })
+    .catch(reject)
+}) */
+/**
+ * js字符串转换成js
+ * @param bundle
+ * @param filename
+ * @returns {{exports: {}}}
+ */
+const getModuleFromString = (bundle, filename) => {
+  const m = { exports: {} }
+  const wrapper = NativeModule.wrap(bundle)
+  const script = new vm.Script(wrapper, {
+    filename: filename,
+    displayErrors: true
+  })
+  const result = script.runInThisContext()
+  result.call(m.exports, m.exports, require, m)
+  return m
+}
+
+const mfs = new MemoryFs
+const serverCompiler = webpack(serverConfig)
+
+serverCompiler.outputFileSystem = mfs
+
+let serverBundle
+
+/**
+ * 监听输出文件的变化 实现热更新
+ */
+serverCompiler.watch({}, (err, stats) => {
+  if (err) throw err
+  stats = stats.toJson()
+  stats.errors.forEach(err => console.error(err))
+  stats.warnings.forEach(warn => console.warn(warn))
+
+  const bundlePath = path.join(
+    serverConfig.output.path,
+    serverConfig.output.filename
+  )
+  const bundle = mfs.readFileSync(bundlePath, 'utf-8')
+  const m = getModuleFromString(bundle, 'server-entry.js')
+  serverBundle = m.exports
+})
+
+module.exports = function (app) {
+  app.use('/public', proxy({
+    target: 'http://localhost:' + clientDevPort
+  }))
+
+  app.get('*', function (req, res, next) {
+    if (!serverBundle) {
+      return res.send('waiting for compile, refresh later')
+    }
+    getTemplate().then(template => {
+      return serverRender(serverBundle, template, req, res)
+    }).catch(next)
+  })
+}