用 Webpack 搭建 React 脚手架：初学者友好指南

2023-10-20 06:52:38

用 Webpack 搭建 React 脚手架：初学者指南

在现代网络开发中，React 是一个不可或缺的工具。然而，从头开始设置 React 项目可能是一项艰巨的任务，这就是 Webpack 的用武之地。Webpack 是一种打包工具，可以帮助你简化和自动化 React 项目的构建过程。

本指南将向你展示如何使用 Webpack 从零开始搭建一个 React 脚手架，让你可以轻松快速地启动 React 项目。

设置项目

首先，创建一个新目录并初始化一个新的 npm 项目：

mkdir my-react-app
cd my-react-app
npm init -y

安装 Webpack

接下来，安装 Webpack 和必要的加载器：

npm install --save-dev webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react babel-loader

创建 Webpack 配置文件

在项目根目录创建一个名为 webpack.config.js 的新文件，并添加以下配置：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000,
    hot: true,
  },
};

创建 React 应用程序

在 src 目录下创建一个名为 index.js 的新文件，并添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, React!</h1>;
};

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