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 。