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或状态更改，所以它的子组件不会被重新渲染。

例如，如果您正在执行以下操作：

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 。