重新定义高效率的前端开发：揭开Webpack 5 搭建 React 脚手架的奥秘

2023-12-13 07:58:42

搭建React脚手架项目

首先，安装Webpack 5和React所需的相关依赖。

npm install -g webpack-cli
npm install --save-dev webpack webpack-dev-server react react-dom

接下来，创建一个新的项目目录并进入该目录。

mkdir my-react-project
cd my-react-project

在项目目录下初始化一个新的package.json文件，并添加必要的脚本命令。

npm init -y

在package.json文件中添加以下脚本：

{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --mode production"
  }
}

然后，创建一个名为src的目录，并在此目录下创建一个名为index.js的文件，该文件将作为我们的应用程序的入口文件。

// 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'));

接下来，创建一个名为webpack.config.js的文件，该文件将用于配置Webpack。

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};