Question

所以我最终设置了一个工作项目：

电子（2.0.2）
React（16.4.0）
React-router-dom（4.2.2）
Webpack（4.11.0）
React-hot-loader（4.2.0）

当我开始开发一些反应组件时，我注意到我的项目不会热重新加载正确。如果我在基本网址（/）上调整了某些内容，它会正确更新，但如果我在辅助网址上更新某些内容，请说出/test网络包编译，但我收到消息Cannot GET /test 。

我已经尝试了很多，但我似乎无法弄清楚我做错了什么。我查看了react-router-dom，因为热重新加载是版本3.x中的一个问题，但是他们说现在应该解决它（在4.x - ＆gt; It works here..中）。我还在<base href="/"/>中添加了index.html，这不是它。

谁能告诉我我做错了什么？

Webpack.common.js （这已合并到Webpack.dev.js）

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  resolve: {
    modules: [path.resolve(__dirname), 'node_modules']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          cacheDirectory: true,
          presets: ['env', 'react'],
          plugins: ['transform-runtime'],
          env: {
            development: {
              plugins: ['react-hot-loader/babel']
            },
            production: {
              presets: ['react-optimize']
            }
          }
        }
      }
    ]
  }
};

Webpack.dev.js

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-source-map',
  entry: {
    'app': [
      'babel-polyfill',
      'react-hot-loader/patch',
      path.join(__dirname, 'src', 'index.js')
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin() // Enable hot module replacement
  ]
});

Index.js

import React from "react";
import ReactDOM from "react-dom";
import { AppContainer } from "react-hot-loader";

import { App } from "./app";

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component/>
    </AppContainer>,
    document.getElementById("root")
  );
};

render(App);

if (module.hot) {
  module.hot.accept("./app", () => {
    render(App);
  });
}

App.js （我的应用程序的主要入口点，因此我定义了我的基本路由）

import React, { Component } from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';

import { Test } from './components/test';
import { Test2 } from './components/test2';

export class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <NavLink to="/">Home</NavLink>
          <NavLink to="/test">Test</NavLink>
          <div>
            <Route exact path="/" component={Test}/>
            <Route path="/test" component={Test2}/>
          </div>
        </div>
      </BrowserRouter>
    );
  }
}

组件'test'和'test2'只是简单的反应组件，带有'hello world'文本。

任何人看到我遗失或做错的事情？

Answer 1

感谢this tutorial我找到了一种方法来调整我的项目并使热负载工作。它甚至使我的代码更清洁，我的构建脚本更简单。

<强> Webpack.common.js

我需要改变的第一件事是babel-loader。我从一些教程中偷了它，它有效，但我不确切知道它做了什么，所以我摆脱了那段代码。我还通过webpack.DllReferencePlugin更快地编译了我的代码。

这是更新的webpack.common.js：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  entry: {
    app: [
      'babel-polyfill',
      './src/index.js',
    ],
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          plugins: ['react-hot-loader/babel'],
          cacheDirectory: true,
          presets: ['env', 'react'],
        },
      }
    ],
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.join(__dirname),
      manifest: require('../dist/vendor-manifest.json'),
    }),
    new HtmlWebpackPlugin({
      title: '<my-app-name>',
      filename: 'index.html',
      template: './public/index.html',
    }),
    new AddAssetHtmlPlugin({
      filepath: path.resolve(__dirname, '../dist/*.dll.js'),
      includeSourcemap: false // add this parameter
    })
  ],
};

AddAssetHtmlPlugin是必需的，因为index.html是针对开发服务器动态创建的（HtmlWebpackPlugin），并且您无法对vendor.dll的正确包导入进行硬编码， app.bundle（more here）。

<强> webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
const path = require('path');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-source-map',
  devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, 'dist'),
    historyApiFallback: true // Allow refreshing of the page
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // Enable hot reloading
  ]
});

我改变了什么：

我将切入点移至webpack.common。
我从'react-hot-loader/patch'

entry

（可选）我为webpack-dev-server添加了一些配置选项。

<强> Index.js

这是导致热重载失败的文件。特别是if(module.hot)部分导致它失败。所以我把它改成了以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';

import { App } from './app';

const render = () => {
  ReactDOM.render(
    <AppContainer>
      <App/>
    </AppContainer>,
    document.getElementById('app'),
  );
};

render(App);

if (module.hot) {
  module.hot.accept('./app', () => {
    const NextApp = require('./app').default; // Get the updated code
    render(NextApp);
  });
}

它现在工作的原因是因为现在我获取新的应用程序并替换旧应用程序，因此告诉热加载器已经发生了变化。我也可以使用module.hot.accept()，但这会使react-hot-loader无用（你使用webpack热重新加载器），这样我每次更新时都会丢失组件中的状态代码。

所以你去吧。我希望这能帮助任何人（除了我自己）。

React-hot-loader不能与React-router-dom一起使用

1 个答案: