我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

绝大多数情况下,都是通过create-react-app来搭建react app的环境的。但是,实际上create-react-app也是基于webpack环境的,所以,通过配置babel,创建自己的react环境,也是有可能的。

苏南大叔:react教程,如何搭建自己的webpack+react环境? - webpack-react-env
react教程,如何搭建自己的webpack+react环境?(图6-1)

大家好,苏南大叔的博客,欢迎大家的到来。本文描述为了使得系统识别到最新的react环境,需要做什么样的babelrc配置。归类上归为webpack教程里面。测试环境:win10node@16.14.2webpack@5.74.0webpack-cli@4.10.0webpack-dev-server@4.9.3react@18.2.0react-dom@18.2.0babel-loader@8.2.5@babel/core@7.18.9@babel/preset-env@7.18.9@babel/preset-react@7.18.6

基本环境

本文是基于webpack-devserver搭建的,在下面这篇文章里面,有着其package.json的配置信息。参考文章:
* https://newsn.net/say/webpack-css-module.html

仅供参考,需要安装的依赖:

npm i webpack webpack-cli webpack-dev-server --save-dev
npm i style-loader mini-css-extract-plugin html-webpack-plugin css-loader --save-dev
npm i react react-dom react-redux @reduxjs/toolkit --save

重点是要安装babel系列依赖:

npm i babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

如果大家对本文的内容有疑义的话,可以把create-react-app项目,给reject一下看看配置信息。

苏南大叔:react教程,如何搭建自己的webpack+react环境? - react-diy
react教程,如何搭建自己的webpack+react环境?(图6-2)

配置.babelrc文件

.babelrc

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

苏南大叔:react教程,如何搭建自己的webpack+react环境? - babelrc
react教程,如何搭建自己的webpack+react环境?(图6-3)

配置webpack.config.js

module.exports = {
    //...
    module: {
        rules: [
            { 
                test: /\.js|jsx$/, 
                use: 'babel-loader', 
                exclude: /node_modules/,
            },
            //...
        ]
    }
    //...
}

苏南大叔:react教程,如何搭建自己的webpack+react环境? - webpack配置
react教程,如何搭建自己的webpack+react环境?(图6-4)

测试代码

index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
function Counter(props) {
    return (
      <div>
        react test by {props.name}
      </div>
    );
  }
root.render(
  <React.StrictMode>
      <Counter name="sunan大叔" />
  </React.StrictMode>
);

测试结果截图:

苏南大叔:react教程,如何搭建自己的webpack+react环境? - 测试代码
react教程,如何搭建自己的webpack+react环境?(图6-5)

苏南大叔:react教程,如何搭建自己的webpack+react环境? - 运行结果
react教程,如何搭建自己的webpack+react环境?(图6-6)

相关文章

综述

测试成功!更多react经验文章,请点击:

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react    webpack