从零配置：构建专属的webpack5 + react开发环境

2024-02-03 12:31:38

前言
在开发项目时，我们习惯于使用脚手架快速创建项目，但你是否想过脚手架背后做了什么？webpack又是如何工作的？为了探究这些问题，本文将带领你从零配置一个webpack5+react开发环境，让你对项目配置有更深入的了解。

配置webpack

1. 项目初始化

首先，使用npm或yarn创建项目目录，并安装webpack5：

npm init -y
npm install webpack webpack-cli -D

2. 配置webpack

在项目根目录创建webpack.config.js文件，编写webpack配置：

const path = require('path');

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

3. 编写代码

在src目录下创建index.js文件，编写react代码：

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

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

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