Question

我的webpack热模块更换工作正常。有人告诉我，一旦它工作，我将不再需要为我的代码进行全面刷新。不是这种情况！当我更改代码时，我仍然需要刷新！（App.js）。

如何正确启用webpack HMR？

上链接到该项目

这是我的切入点

import './styles/index.css';
import App from './components/App';
import React from 'react';
import { render } from 'react-dom';

const rootDOMNode = document.getElementById('app');

function renderRoot() {
  render(<App/>, rootDOMNode);
}
renderRoot();

if (module.hot) {
  module.hot.accept('./components/App', () => {
    console.log('Accepting the updated module');
    renderRoot();
  });
}

webpack.config.js：

const webpack = require("webpack");
const path = require("path");
const CleanWebpackPlugin = require( "clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: [
    "./app/index"
  ],
  devtool: "inline-source-map",
  output: {
    path: path.resolve(__dirname, "dist"), // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: "/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    hot: true,
    port: 3000,
    open: true,
    compress: true
  },
  plugins: [
    new ExtractTextPlugin({
      disable: false,
      filename: "css/style.css",
      allChunks: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),

  ],
  module: {
    rules: [
      { test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
        loader: 'babel-loader',
        options: {
          presets: ['env', 'react']
        }
      } },
      // { test: /(\.css)$/, use: ["style-loader", "css-loader"] },
      { test: /(\.css)$/, use: ExtractTextPlugin.extract(["css-loader"]) },
      { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
      // for fonts
      { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ["file-loader"] }
    ]
  }
};

Answer 1

我通过在package.json中添加脚本来使用webpack-dev-server进行热重新加载。

webpack-dev-server --output-public-path=/dist/ --inline --hot

Answer 2

它无法正常工作的原因是，一旦获得热门更新，您就必须重新要求app，否则您只是重新渲染原始应用。

以下代码应该有效：

import './styles/index.css';
//import App from './components/App';
import React from 'react';
import { render } from 'react-dom';

const rootDOMNode = document.getElementById('app');

let App;
function renderRoot() {
  App = require('./components/App').default; // we have to re-require this every time it changes otherwise we are rendering the same old app.
  render(<App/>, rootDOMNode);
}
renderRoot();

if (module.hot) {
  module.hot.accept('./components/App', () => {
    console.log('Accepting the updated module');
    renderRoot();
  });
}

即使在设置之后，Webpack热模块更换仍需要完全刷新

2 个答案: