Question

在阅读Dan Abramov的Medium post后，我尝试使用webpack进行非常基本的HMR（没有react-hot-loader）。

条目index.js

import React from 'react';
import { render } from 'react-dom';

import App from './App';

if(module.hot) {
  // Basic HMR for React without using react-loader

  // module.hot.accept('./App', () => {
  //   const UpdatedApp = require('./App').default;
  //
  //   render(<UpdatedApp />, document.getElementById('app'));
  // });

  // Why does this work as well?
  module.hot.accept();
}

render(<App />, document.getElementById('app'));

webpack配置

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

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8081',
    'webpack/hot/only-dev-server',
    './src/js/index.js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [{ loader: 'babel-loader' }]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: 'src/index.html' }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ],
  devServer: {
    hot: true
  }
}

我的问题是，为什么针对React应用的HMR仅适用于module.hot.accept()？

根据我的理解，webpack的HMR只提供了一个简单的API来检测文件中的变化。如何处理这些更改取决于加载器。样式加载器处理.css个文件。而且，在React应用程序的上下文中，.js模块的更改可能由react-hot-loader管理。

或者，根据Medium post，可以像这样管理它们：

render(<UpdatedApp />, document.getElementById('app'))

那么为什么只做module.hot.accept()会得到与执行render(<UpdatedApp />, document.getElementById('app'))相同的结果？

包裹版本

"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"

为什么这个基本的webpack热模块更换工作？

0 个答案: