Webpack 3 webpack-dev-server 热重载不起作用

Question

我知道这个问题已经被问过很多次了，但我似乎无法找到正确的调整组合来让它发挥作用。

一切都在构建，一切都在运行。 Webpack 构建输出甚至显示启用了热替换。当我更改一个组件时，它会成功重建......但是当我重新加载页面时没有任何变化：

Version: webpack 3.10.0
Time: 359ms
        Asset    Size  Chunks                    Chunk Names
 main.dist.js   5.7 MB       0  [emitted]  [big]  main
main.dist.css  151 kB       0  [emitted]         main
 + 10 hidden assets
 [456] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
 [911] ./node_modules/moment/locale ^\.\/.*$ 2.88 kB {0} [optional] [built]
[1004] ./src/components/admin/admin.js 3.77 kB {0} [built]
    + 1016 hidden modules
webpack: Compiled successfully.

我的 webpack.config.js：

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

let plugins = [
    new ExtractTextPlugin("main.dist.css")
];

module.exports = {
    node: {
        fs: "empty",
        net: "empty",
        tls: "empty"
    },
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "assets/dist/"),
        publicPath: "./assets/dist/",
        filename: "main.dist.js"
    },
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                    presets: ["env", "stage-2", "react"]
                }
            },
            {
                test: /\.scss$/,
                loader: "style!css!resolve-url!sass?sourceMap"
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader"] })
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            }
        ]
    },
    resolve: {
        extensions: ["*", ".js", ".jsx"]
    },
    devServer: {
        inline: true,
        hot: true,
        historyApiFallback: true,
        contentBase: "./"
    },
    devtool: "eval-source-map",
    plugins: plugins
};

index.js：

import React from "react";
import ReactDOM from "react-dom";
import Routes from "./routes/index";

import "bootstrap/dist/css/bootstrap.css";
import "../assets/css/styles.css";

ReactDOM.render(Routes, document.querySelector(".container"));

我尝试将 index.html 文件放入 ./assets/dist 文件夹并将 contentBase 设置为该文件夹：

devServer: {
    inline: true,
    hot: true,
    historyApiFallback: true,
    contentBase: "./assets/dist"
},

它运行了，但是如何重新加载仍然不起作用。没有变化。

Answer 1

保存应用中所有页面/场景的组件会在位置更改时阻止更新。

那是因为它没有检测到任何 prop 或 state 的变化，所以它的子组件不会被重新渲染。

例如，如果你正在做这样的事情：

class App extends Component {
  render () {
    return (
      <div> 
        <NavLink to='/home'>Home</NavLink>
        <NavLink to='/login'>Login</NavLink>
        {this.props.children}
      </div>
    )
  }
}

您可以通过将location 作为道具传递来解决此问题，因此当位置更改时，子级将重新渲染。将位置作为道具传递的最简单方法是：

import { withRouter } from 'react-router'

export default withRouter(App)

注意：如果您的项目代码越多，答案就会越准确。请多分享一点，尤其是你的routeConfig。