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

包含应用中所有网页/场景的组件在位置更改时阻止更新。

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

例如，如果你这样做：

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。

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

1 个答案: