零成本玩转React开发：从零基础到在线预览的全能指南

2024-02-18 03:54:00

在上一篇文章中，我们已经了解了 webpack 的基本配置，并能够使用 React 来编写基本组件。但每次编写组件都需要重新执行 webpack 命令打包，然后再手动在浏览器中打开页面才能看到开发结果，这显然不是一个理想的状态，我们希望能像其他现代前端框架那样，通过一个命令即可启动项目，并在开发过程中实时看到开发结果。这就是本文要介绍的内容：如何使用 webpack 搭建一个完整的 React 开发环境，并实现在线预览功能。

首先，我们需要安装必要的依赖。除了 webpack 之外，我们还需要安装 webpack-dev-server、babel-loader、react-hot-loader 和其他一些开发工具。这些依赖可以很容易地通过 npm 安装：

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

安装完成后，我们需要修改 webpack 配置文件，在plugins数组中添加 HotModuleReplacementPlugin 插件，并在devServer字段中添加相应配置，如下所示：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    contentBase: './dist',
    hot: true,
  }
};

这样一来，webpack 就会在开发模式下运行，并且启动一个开发服务器。我们可以通过以下命令来启动开发服务器：

npm start

启动后，开发服务器会自动打开浏览器并显示项目的主页。此时，我们可以开始编写 React 组件，并实时看到开发结果。例如，我们可以创建一个简单的计数器组件：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

我们将这个组件保存在 src/components/Counter.js 文件中，然后在 src/index.js 文件中导入并使用它：

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './components/Counter';

ReactDOM.render(<Counter />, document.getElementById('root'));