搭建React开发环境(webpack方式)

最新推荐文章于 2024-08-25 23:10:32 发布

小菜G

最新推荐文章于 2024-08-25 23:10:32 发布

阅读量531

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/CarefreeScholar/article/details/118485261

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

搭建React（webpack方式）

1.0 前言

     学习react一段时间后，想把相关知识做一下简单总结。记录react在js文件下或webpack下的开发环境：
     1.以引入js文件的方式进行开发
     2.在node.js(webpack)的基础上进行开发

1.1 js文件的方式

首先要下载三个必要js文件: react.development.js、react-dom.development.js、babel.min.js

<!--react js下载路径-->
<script src="https://unpkg.com/react@16/umd/react.development.js">
</script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>
<!--babel.min.js下载路径-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js">
</script>

其次使用方式如下方代码所示，注意文件引入顺序不要错

<!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>react 环境搭建</title>
    <!--引入react核心库-->
    <script type="text/javascript" src="JS/react.development.js"></script>
    <!--引入react-dom,用于支持react操作DOM-->
    <script type="text/javascript" src="JS/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="JS/babel.min.js"></script>
    <script type="text/babel">/*此处必须写babel*/
    //1.创建虚拟DOM
    const VDOM = <h1>Hello React</h1>;
    //2.渲染到页面
    ReactDOM.render(VDOM,document.getElementById("test"));
    </script>
</head>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
</body>
</html>

1.2 在node.js(webpack)的基础上

1.2.1 了解node.js

     首先需要安装node.js。下载路径：http://nodejs.cn/download/。安装完成后，运行 cmd ，输入 node - v 检测版本号是否安装成功。以及输入 npm -v 检测npm是否好用。
在这里插入图片描述
     接下来我们需要了解一些有关与npm的使用：
    npm：队列安装包，指向国外服务器下载。
    更改镜像命令：npm config set registry https://registry.npmjs.org/（国外服务器）

    cnpm：和npm用法一致，只不过是指向国内服务器，淘宝镜像。
    全局安装cnpm命令：npm i cnpm -g
    更改镜像命令： cnpm config set registry https://r.npm.taobao.org/ （国内）或者https://registry.npm.taobao.org/

     yarn：并行安装，离线模式：若之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，不用像npm那样再从网络下载了。
    全局安装yarn命令：npm install yarn –g
    更改镜像命令：yarn config set registry https://registry.yarnpkg.com（国外）

npm相关命令：

npm init -y --注释：快速创建一个包管理文件package.json，即快速初始化项目。package.json有两种环境：devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

npm install 插件名称@版本号 --安装指定版本。i 是install 的简写

npm install 插件名称@版本号 -g --全局安装。

npm uninstall 插件名称 --卸载插件名称后面跟-g则是全局卸载。

-S 即-–save --将保存配置信息至package.json 写入到 dependencies 生产环境对象

-D 即--save-dev --写入到 devDependencies 开发环境对象

1.2.2 搭建开发环境

创建一个文件夹，执行npm init -y快速初始化项目。然后在项目根目录创建src源代码目录和dist产品目录，在src目录下创建index.html。
在这里插入图片描述
执行 cnpm i webpack webpack-cli -D 安装webpack ,4.x上的版本还需要安装cli，程序打包被拆分到cli里面提供。打包入口文件是src->index.js ，打包的输出文件是dist->main.js

执行命令cnpm i react react-dom -S react用来创建组件，同时组件的生命周期都在这个包中，react-dom 专门进行DOM操作。

     为了获取即时修改的内容，执行命令cnpm i webpack-dev-server -D webpack-dev-server将打包好的main.js 托管到内存中，所以在项目根目录中看不到，但是可以认为根目录有一个main.js
    执行命令cnpm i html-webpack-plugin -D 为避免磁盘损伤，协助把页面生成到内存中去
    创建webpack.config.js文件，输入以下内容

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') //导入在内存中自动生成index页面插件

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname,'./src/index.html'),//源文件
    filename:'index.html'//生成的内存中首页的名称
})

//向外暴露一个打包的配置对象
module.exports = {
    mode:'development',// development(开发模式) production(生产模式) 会压缩文件
    //在webpack 4.x 中，有一个很大的特性，就是约定大于配置，约定默认的打包入口路径是src->index.js
    plugins:[
        htmlPlugin
    ],
    //webpack 默认只能打包处理.js后缀名类型的文件，
    //像.png .vue 无法主动处理
    //所以要配置第三方的loader；
    //所有第三方模块的配置规则放入module
    module: {
        rules: [
            {
                test: /\.js|jsx$/,
                use: 'babel-loader',
                exclude: /node_modules/ //排除项目，必须,是正则不是字符串
            }
        ]
    }
}

    在package.json设置dev，然后执行命令npm run dev运行程序
    "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"可以设置IP端口号等。
在这里插入图片描述
    启用jsx语法，执行以下命令：
    cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
    cnpm i babel-preset-env babel-preset-stage-0 -D
    cnpm i babel-preset-react -D
    创建.babelrc文件输入以下内容：

{
	"presets": ["env", "stage-0", "react"],
	"plugins": ["transform-runtime"]
}

在这里插入图片描述
    在上述操作中，因为版本兼容问题会出现各种异常，可以使用如下图所示版本

    还有一些相关配置：
    npm i style-loader -D --打包处理css样式表的第三方loader
    npm i url-loader file-loader -D --打包处理第三方样式带的相关字体文件的loader
    cnpm i sass-loader node-sass -D --打包处理scss文件的loader
    npm install less-loader less -D --打包处理less文件的loader

完整webpack.config.js内容如下：


const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') //导入在内存中自动生成index页面插件

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname,'./src/index.html'),//源文件
    filename:'index.html'//生成的内存中首页的名称
})

//向外暴露一个打包的配置对象
module.exports = {
    mode:'development',// development(开发模式) production(生产模式) 会压缩文件
    //在webpack 4.x 中，有一个很大的特性，就是约定大于配置，约定默认的打包入口路径是src->index.js
    plugins:[
        htmlPlugin
    ],
    //webpack 默认只能打包处理.js后缀名类型的文件，
    //像.png .vue 无法主动处理
    //所以要配置第三方的loader；
    //所有第三方模块的配置规则放入module
    module: {
        rules: [
            {
                test: /\.js|jsx$/,
                use: 'babel-loader',
                exclude: /node_modules/ //排除项目，必须,是正则不是字符串
            },
            //在css-loader之后通过？追加参数，其中有个固定参数叫modules,表示为普通的css样式启用模块化
            //使导入的样式具有属性特性，只针对类选择器和ID选择器生效，不会将标签选择器模块化
            //localIdentName自定义生成类名的格式，path表示相对项目根目录所在路径，name表示样式表文件名称
            //local表示样式类名定义的名称 hash：length表示32位hash值  
            //可通过:global() 去除模块化 :local()包裹表示可以被模块化
            //第三方样式表都是以.css结尾，自己的样式表都要以.scss或.less结尾
            //不为css启用模块化，为.scss或.less启用
            // {
            //     test:/\.css$/,use:['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]']
            // },//打包处理css样式表的第三方loader
            {
                test:/\.css$/,use:['style-loader','css-loader']
            },//打包处理css样式表的第三方loader
            {
                test:/\.css$/,use:['style-loader','css-loader','sass-loader']
            },//打包处理scss文件的loader
            {
              test:/\.ttf|woff|wof2|eot|svg$/,use:'url-loader'  
            },//打包处理字体文件的loader
        ]
    },
    resolve:{
        extensions:['.js','.jsx','.json'],//表示，这几个文件的后缀名可以省略不写
        alias:{
            '@':path.join(__dirname,'./src')//这样，@就表示项目根目录中src的这一层路径
        }
    }
}