Question

我正在试图弄清楚如何在我的新SSR应用程序中正确实现react-hot-loader，我已经能够在以前的项目中做得很好，但我是SSR的新手所以无法理解它出。

这是我的webpack.config.client：

const path = require("path");
const merge = require("webpack-merge");
const baseConfig = require("./webpack.config.base.js");

const client_path = path.resolve(__dirname, "public");
const config = {
  name: "client",
  target: "web",
  entry: ["react-hot-loader/patch", "./src/client/client.js"],
output: {
    path: client_path,
    filename: "bundle.js"
},
  resolve: {
extensions: [".js", ".jsx"]
}
};

module.exports = merge(baseConfig, config);

这是我的webpack.config.server：

const path = require("path");
const merge = require("webpack-merge");
const baseConfig = require("./webpack.config.base.js");
const webpackNodeExternals = require("webpack-node-externals");
const server_path = path.resolve(__dirname, "build");
const config = {
  target: "node",
  name: "server",
  entry: ["react-hot-loader/patch", "./src/index.js"],
output: {
    filename: "bundle.js",
    path: server_path
},
resolve: {
    extensions: [".js", ".jsx"]
},

externals: [webpackNodeExternals()]
};

module.exports = merge(baseConfig, config);

和webpack.config.base;

module.exports = {
  module: {
    rules: [
  {
    test: /\.(js|jsx)$/,
    enforce: "pre",
    loader: "babel-loader"
    exclude: /node_modules/,
    options: {
      presets: [
        "es2015",
        "react",
        "stage-0",
        [
          "env",
          { targets: { browsers: ["last 2 versions"] } }
        ]
      ],
      plugins: [
        "react-hot-loader/babel",
        ["transform-class-properties", { spec: true }]
      ]
    }
  }]
 }
};

和package.json脚本：

"scripts": {
   "dev": "npm-run-all --parallel dev:*",
   "dev:server": "nodemon --w build --exec \"node build/bundle.js\"",
   "dev:build-server": "webpack --config webpack.config.server.js --w",
   "dev:build-client": "webpack --config webpack.config.client.js --w"
  },

如果有用的链接到github - https://github.com/dmartss/health2

带SSR的React-hot-loader

0 个答案: