无法让 Webpack 2 HMR React 工作

Question

目前我正在努力让 HMR 在我的 Webpack 2 设置中工作。我将解释我的整个设置，所以我希望这足以让人们理解发生了什么。

我的项目结构：

config
  dev.js
  prod.js 
dist
  css
  js
  index.html
node_modules
src
  components
    // some JavaScript components
  shared
  stylesheets
  index.js
.babelrc
package.json
webpack.config.js

这是我的 webpack.config.js 文件的内容，位于我的项目的根目录中：

function buildConfig(env) {
  return require('./config/' + env + '.js')(env)
}

module.exports = buildConfig;

所以在这个文件中，我可以选择将不同的环境传递给 buildConfig 函数。我使用此选项为开发和生产使用不同的配置文件。这是我的 package.json 文件中的内容：

{
  "main": "index.js",
  "scripts": {
    "build:dev": "node_modules/.bin/webpack-dev-server --env=dev",
    "build:prod": "node_modules/.bin/webpack -p --env=prod"
  },
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-cli": "^6.18.0",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.2.5",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "json-loader": "^0.5.4",
    "node-sass": "^3.13.1",
    "postcss-loader": "^1.3.3",
    "postcss-scss": "^0.4.1",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "babel-plugin-react-css-modules": "^2.6.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-icons": "^2.2.1"
  }
}

我的 package.json 中当然还有更多字段，但我不会在此处显示它们，因为它们无关紧要。

所以在开发过程中，我在终端中运行 npm run build:dev 命令。这将使用 config 文件夹中的文件 dev.js。这是 dev.js 文件的内容：

const webpack = require('webpack');
const { resolve } = require('path');
const context = resolve(__dirname, './../src');

module.exports = function(env) {
  return {
    context,
    entry: {
      app: [
        'react-hot-loader/patch',
        // activate HMR for React
        'webpack-dev-server/client?http://localhost:3000',
        // bundle the client for webpack-dev-server
        // and connect to the provided endpoint
        'webpack/hot/only-dev-server',
        // bundle the client for hot reloading
        // only- means to only hot reload for successful updates
        './index.js'
        // the entry point of our app
      ]
    },
    output: {
      path: resolve(__dirname, './../dist'), // `dist` is the destination
      filename: '[name].js',
      publicPath: '/js'
    },
    devServer: {
      hot: true, // enable HMR on the server
      inline: true,
      contentBase: resolve(__dirname, './../dist'), // `__dirname` is root of the project
      publicPath: '/js',
      port: 3000
    },
    devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.js$/, // Check for all js files
          exclude: /node_modules/,
          use: [{
            loader: 'babel-loader',
            query: {
              presets: ['latest', 'react'],
              plugins: [
                [
                  "react-css-modules",
                  {
                    context: __dirname + '/../src', // `__dirname` is root of project and `src` is source
                    "generateScopedName": "[name]__[local]___[hash:base64]",
                    "filetypes": {
                      ".scss": "postcss-scss"
                    }
                  }
                ]
              ]
            }
          }]
        },
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                modules: true,
                importLoaders: 2,
                localIdentName: '[name]__[local]___[hash:base64]'
              }
            },
            'sass-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => {
                  return [
                    require('autoprefixer')
                  ];
                }
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      // enable HMR globally
      new webpack.NamedModulesPlugin()
      // prints more readable module names in the browser console on HMR updates
    ]
  }
};

最后但同样重要的是，我的 HMR 设置。我的 index.js 文件中有此设置：

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import TodoApp from './components/TodoApp';
import './stylesheets/Stylesheets.scss';

const render = (Component) => {
  ReactDOM.render(
      <AppContainer>
        <Component />
      </AppContainer>,
      document.querySelector('#main')
  );
};

render(TodoApp);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./components/TodoApp', () => {
    render(TodoApp)
  });
}

因此，当我在浏览器中运行我的 npm start build:dev 并转到 http://localhost:3000 时，我看到我的网站按预期工作。这是控制台中的输出：

dev-server.js:49 [HMR] Waiting for update signal from WDS...
only-dev-server.js:66 [HMR] Waiting for update signal from WDS...
TodoApp.js:102 test
client?344c:41 [WDS] Hot Module Replacement enabled.

test 文本来自我的 TodoApp 组件中的渲染函数。这个函数看起来像这样：

render() {
  console.log('test');
  return(
      <div styleName="TodoApp">
        <TodoForm addTodo={this.addTodo} />
        <TodoList todos={this.state.todos} deleteTodo={this.deleteTodo} toggleDone={this.toggleDone} updateTodo={this.updateTodo} />
      </div>
  );
}

所以，现在是重要的事情。我更新了此渲染函数的 return，这应该会触发 HMR 启动。我将渲染函数更改为此。

render() {
  console.log('test');
  return(
      <div styleName="TodoApp">
        <p>Hi Whosebug</p>
        <TodoForm addTodo={this.addTodo} />
        <TodoList todos={this.state.todos} deleteTodo={this.deleteTodo} toggleDone={this.toggleDone} updateTodo={this.updateTodo} />
      </div>
  );
}

这是我在控制台中得到的输出：

client?344c:41 [WDS] App updated. Recompiling...
client?344c:41 [WDS] App hot update...
dev-server.js:45 [HMR] Checking for updates on the server...
TodoApp.js:102 test
log-apply-result.js:20 [HMR] Updated modules:
log-apply-result.js:22 [HMR]  - ./components/TodoApp.js
dev-server.js:27 [HMR] App is up to date.

你会说这很好。 但是我的网站没有更新任何东西。

然后我将 index.js 中的 HMR 代码更改为：

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept();
}

并且有效。我只是不明白。如果这是我的 HMR 代码，为什么它不起作用：

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./components/TodoApp', () => {
    render(TodoApp)
  });
}

顺便说一句，此设置基于 https://webpack.js.org/guides/hmr-react/

中的设置

我希望任何人都可以帮助我。如果有人需要更多信息，请毫不犹豫地询问。提前致谢！

更新

忘记 post 我的 .babelrc 文件。就是这样：

{
  "presets": [
    ["es2015", {"modules": false}],
    // webpack understands the native import syntax, and uses it for tree shaking

    "react"
    // Transpile React components to JavaScript
  ],
  "plugins": [
    "react-hot-loader/babel"
    // EnablesReact code to work with HMR.
  ]
}

Answer 1

导入是静态的，在 module.hot.accept 中识别出更新后，您再次呈现完全相同的组件，因为 TodoApp 仍然保留模块的旧版本并且 HMR 意识到这一点并且不会刷新或更改您应用中的任何内容。

您想使用 Dynamic import: import()。要使其与 babel 一起工作，您需要添加 babel-plugin-syntax-dynamic-import，否则它会报告语法错误，因为它不希望将 import 用作函数。如果在 webpack 配置中使用 react-hot-loader/patch，则不需要 react-hot-loader/babel，因此 .babelrc 中的插件变为：

"plugins": [
  "syntax-dynamic-import"
]

在您的 render() 函数中，您现在可以导入 TodoApp 并渲染它。

const render = () => {
  import('./components/TodoApp').then(({ default: Component }) => {
    ReactDOM.render(
      <AppContainer>
        <Component />
      </AppContainer>,
      document.querySelector('#main')
    );
  });
};

render();

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./components/TodoApp', render);
}

import() 是一个将与模块一起解析的承诺，并且您想使用 default 导出。

即使以上是正确的，webpack 文档并不要求您使用动态导入，因为 webpack 可以开箱即用地处理 ES 模块，也在 react-hot-loader docs - Webpack 2 中描述，并且因为 webpack 也在处理HMR，它会知道在这种情况下该怎么做。为此，您不得将模块转换为 commonjs。您使用 ["es2015", {"modules": false}] 完成了此操作，但您还在 webpack 配置中配置了 latest 预设，这也会转换模块。为避免混淆，您应该在 .babelrc 中包含所有 babel 配置，而不是将一些配置拆分到加载程序选项中。

从您的 webpack 配置中完全删除 babel-loader 中的预设，因为您在 .babelrc 中已经有了必要的预设，所以它会起作用。 babel-preset-latest is deprecated and if you want to use these features you should start using babel-preset-env 也取代了 es2015。所以您在 .babelrc 中的预设将是：

"presets": [
  ["env", {"modules": false}],
  "react"
],

Answer 2

在 GitHub 上检查此 issue 或仅在您的 index.js:

中使用此

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

import App from './components/App'

const render = Component => { 
    ReactDOM.render(
        <AppContainer>
            <Component/>
        </AppContainer>,
        document.getElementById('react-root')
    )
}

render(App)

if(module.hot) {
    module.hot.accept();
}

无法让 Webpack 2 HMR React 工作

Can't get Webpack 2 HMR React to work

reactjs

webpack

webpack-dev-server

webpack-hmr

hot-module-replacement