从零构建Webpack 4 + React脚手架（第二部分）

2024-01-26 22:06:42

引言

在上一篇文章中，我们已经完成了Webpack 4和React脚手架的基础构建。在本篇文章中，我们将重点介绍如何设置开发环境和热更新功能，以便在代码改动后自动刷新页面。

开发环境

首先，我们需要安装一些必要的开发环境依赖包。在命令行中运行以下命令：

npm install --save-dev webpack-dev-server react-hot-loader

然后，在Webpack配置文件（通常是webpack.config.js）中进行一些修改。

首先，添加以下代码以启用Webpack Dev Server：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  // ...其他配置项

  devServer: {
    contentBase: path.join(__dirname, 'public'),
    compress: true,
    port: 9000,
    hot: true
  }
};

接下来，添加以下代码以启用React热更新：

module.exports = {
  // ...其他配置项

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: 'react-hot-loader/webpack'
          }
        ]
      }
    ]
  }
};

热更新

现在，我们需要修改React代码以支持热更新。在您的React组件中，添加以下代码：

import { hot } from 'react-hot-loader';

class MyComponent extends React.Component {
  // ...组件代码

  render() {
    // ...渲染代码
  }
}

export default hot(module)(MyComponent);