Webpack搭建React开发环境

一时失言乱红尘 2022-12-18 10:58 167阅读 0赞

## 1、React环境搭建 ##

#### 实现React开发的三种方式： ####

**（1）使用CDN的方式**

**（2）使用React脚手架工具（推荐）**

# 安装脚手架
    npm install -g create-react-app
    # 创建项目
    create-react-app  myapp
    # 启动项目
    npm start

**（3）使用Webpack构建工具**

# 步骤
    // 1. 安装Node、NPM
    	......
    // 2. 安装webpack工具
        ......
    // 3. 安装babel
        ......
    // 4. 创建配置文件
        ......
    // 5. 创建项目目录结构
        ......
    // 6. 配置webpack.config.js和package.json
        ......
    // 7. 搭建本地服务
        ......

## 2、为什么要使用 webpack ？ ##

*  **解耦需要：**
    
     *  使用SPA（Single-page Application，单页面应用）开发大型项目时，解决模块之间的解耦和维护问题；
 *  **前端工程化需要：**
    
     *  前端开发逐渐向工程化演进，理解前端框架的项目构建的流程（如React、Vue、Angular）；
 *  **项目扩展需要：**
    
     *  理解Webpack核心概念（如Babel加载器、Plugin插件），便于项目协同开发与项目整合；
 *  **面试需要：**
    
     *  进入一线互联网公司的必备技能；

## 3、Webpack搭建React开发环境步骤 ##

首先要有node环境，进入[Node.js的官网][Node.js]，选择对应系统下载安装包。安装node后集成了npm管理器

> **设置默认`npm`使用淘宝镜像**

npm config set registry https://registry.npm.taobao.org

> **安装`cnpm`包，安装成功后`npm`命令更换为`cnpm`命令**

npm install -g cnpm --registry=https://registry.npm.taobao.org
    ## 安装成功之后，直接像使用npm一样使用cnpm即可，例如：安装某个包就变成了
    cnpm i packageName

> **设置环境变量**

创建项目文件夹，以 `myapp` 文件为例，该文件即为项目根目录。打开命令提示符，执行：

cd myapp

依次完成以下操作：

#### 第一步 安装模块 ####

创建package.json文件

# 手动配置
    npm init
    # 自动配置
    npm init -y

安装react模块

# 安装react
    cnpm install react --save
    # 安装react-dom
    cnpm install react-dom --save

安装webpack工具

# 安装webpack和webpack-cli
    cnpm install webpack webpack-cli --save-dev

安装babel相关

# 安装 babel和react相关加载器
    cnpm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D

安装css加载器

cnpm i css-loader style-loader -D

安装HTML插件

cnpm i html-webpack-plugin -D

> **PS：**【依赖安装到 开发环境与生产环境的区别】
> 
>  *  开发环境，即项目的编码阶段需要的依赖，上线后不需要引用，例如：webpack构建工具、babel加载器等，使用 `--save` 或 `-S` 命令安装；
>  *  生产环境，项目上线后开始正式提供对外服务的阶段仍然需要依赖支持，例如：jQuery库、路由等，使用 `--save-dev` 或 `-D` 命令安装；

#### 第二步 创建目录结构 ####

项目的目录结构为：

> myapp
> 
>  – public \[静态资源文件目录\]
> 
>  – src \[ 项目源文件目录 \]
> 
>  – dist \[ 打包文件目录 \]
> 
>  – webpack.config.js \[ webpack配置文件 \]
> 
>  – package.json \[ NPM包管理配置文件 \]
> 
>  – node\_modules \[ 项目中的依赖存放目录 \]

在public目录下，创建index.html，该文件为项目的默认首页

<!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="UTF-8" />
            <title>Hello React Webpack</title>
        </head>
        <body>
            <div id="root"></div>
        </body>
    </html>

在src目录下，创建index.js，该文件为项目的入口文件

import React from 'react'
    import ReactDOM from 'react-dom'
    
    ReactDOM.render(<div>Hello React!</div>,document.getElementById('root'));

在项目的根目录下创建webpack.config.js配置文件，依次完成以下配置：

**（1）配置入口（entry）**

module.exports = { 
    	entry:'./src/index.js'
    }

**（2）配置出口（output）**

const path = require('path');
    module.exports = { 
    	// ...
    	output: { 
    	    path: path.resolve(__dirname, 'dist'),
    	    filename: 'main.js'
    	}
    }

**（3）配置加载器（loader）**

module.exports = { 
    	// ...
    	module:{ 
    		rules:[
    			{ 
    				test: /\.css$/,
    				use:['style-loader','css-loader']
    			},
    			{ 
    				test: /\.jsx?$/, // jsx/js文件的正则
    				exclude: /node_modules/, // 排除 node_modules 文件夹
    				use:{ 
                        // loader 是 babel
                        loader: 'babel-loader',
                        options: { 
                            // babel 转义的配置选项
                            babelrc: false,
                            presets: [
                                // 添加 preset-react
                                require.resolve('@babel/preset-react'),
                                [require.resolve('@babel/preset-env'), { modules: false}]
                            ],
                            cacheDirectory: true
                        }
                    }
    			}
    		]
    	}
    }

**（4）配置插件（plugin）**

const HtmlWebPackPlugin = require('html-webpack-plugin');
    module.exports = { 
    	// ...
    	plugins:[
    		new HtmlWebPackPlugin({ 
    			template: 'public/index.html',
    			filename: 'index.html',
    			inject: true
    		})
    	]
    }

> plugins中的inject属性有四个值true | ‘head’ | ‘body’ | false，默认是body，即将脚本插入到body的最底部

执行打包命令

npx webpack --mode development

配置 `npm run build` 命令执行打包操作：

//在 package.json 文件添加 build 项
    { 
        "scripts": { 
            "build": "webpack --mode production"
        }
    }

执行打包命令：

npm run build

#### 第三步 搭建本地服务 ####

安装依赖

cnpm i webpack-dev-server -D

在webpack.config.js文件中配置本地服务相关信息

module.exports = { 
    	// ...
    	devServer: { 
    		contentBase: './dist',
    		host: 'localhost',
    		port: 3000
    	}
    }