基于webpack5从0到1搭建react开发环境

花开花落花中妖
783 阅读1分钟

前言

虽然react官方脚手架 create-react-app 已经提供了完美的实现了该功能。但是，我个人比较喜欢自己搞轮子，探索一下底层的实现方法。虽然我造的轮子不如 ceate-react-app，但是我就是想要尝试一下自己造轮子的过程。

造轮子工程

  1. 创建项目目录

    mkdir my-app && cd my-app

  2. 初始化package.json

    npm init -y

  3. 安装webpack

    npm i webpack webpack-cli -D

  4. 安装 react 相关依赖

    npm i react react-dom

  5. react 项目初始化

    1. 创建 index.js 文件

    2. 初始化react页面

          import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './app';

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

    3. 编辑hello world页面 app.tsx

          import React from "react";

    const Index = () => {
        return (
          <div>Hello World!</div>
        )
     }

     export default Index;

  6. 配置模板文件 index.html

        <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
      <div id="root"></div>
    </body>
    </html>

  7. 配置webpack.config

    1. 安装webpack-merge

      npm i webpack-merge -D

    2. 创建 webpack.common.js 配置文件

    3. 安装并配置 ts|tsx 的解析loader

      npm i @babel/preset-env @babel/preset-react babel-loader -D

           {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
        ]
      },

    4. 在根目录下配置.babelrc文件

          {
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }

    5. 安装并配置 css|scss 相关loader

      npm i style-loader mini-css-extract-plugin css-loader sass-loader node-sass -D

          {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            }
          },
          { loader: 'sass-loader' }
        ]
      }

    6. 配置字体、图片资源的解析

        {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: 'asset/resource',
  },
  {
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource',
  }

  8. 安装并配置 html-webpack-plugin

    npm i html-webpack-plugin -D

        const { merge } = require('webpack-merge');
    const common = require('./webpack.common.js');

    module.exports = merge(common, {
      mode: 'development',
      devtool: 'source-map',
      devServer: {
        proxy: {
          '/api': {
            target: 'http://127.0.0.1:3000',
            changeOrigin: true,
            pathRewrite: {
              '/api': ''
            }
          }
        }
      },
    });

  9. 安装webpack-dev-server，并配置开发环境命令

    npm i webpack-dev-server -D

    "start": "webpack serve --open --config ./config/webpack.dev.js --port 8000"

  10. 配置生产环境

    "build": "set NODE_ENV=production && webpack --config ./config/webpack.prod.js"

        module.exports = (merge(common, {
      mode: 'production',
      cache: {
        type: 'filesystem',
        compression: 'gzip',
      },
      module: {
        rules: [
        ]
      },
      optimization: {
        minimize: true,
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: '[name].[contenthash:8].css',
          chunkFilename: '[id].css',
        }),
      ]
    }));

结语

现在一个基本的react项目可以跑起来了，欢迎大家在评论区留言讨论；

最后，后续有关webpack深入研究和配置优化，推荐大家查看下面几篇文章（仅供参考）：

webpack专栏

avatar
文章
阅读
粉丝