當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Webpack搭建React开发环境

發(fā)布時(shí)間：2024/9/27 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 Webpack搭建React开发环境小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Webpack搭建React開(kāi)發(fā)環(huán)境

1、React環(huán)境搭建

實(shí)現(xiàn)React開(kāi)發(fā)的三種方式：

（1）使用CDN的方式

（2）使用React腳手架工具（推薦）

# 安裝腳手架 npm install -g create-react-app # 創(chuàng)建項(xiàng)目 create-react-app myapp # 啟動(dòng)項(xiàng)目 npm start

（3）使用Webpack構(gòu)建工具

# 步驟 // 1. 安裝Node、NPM...... // 2. 安裝webpack工具...... // 3. 安裝babel...... // 4. 創(chuàng)建配置文件...... // 5. 創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)...... // 6. 配置webpack.config.js和package.json...... // 7. 搭建本地服務(wù)......

2、為什么要使用 webpack ？

解耦需要：
- 使用SPA（Single-page Application，單頁(yè)面應(yīng)用）開(kāi)發(fā)大型項(xiàng)目時(shí)，解決模塊之間的解耦和維護(hù)問(wèn)題；
前端工程化需要：
- 前端開(kāi)發(fā)逐漸向工程化演進(jìn)，理解前端框架的項(xiàng)目構(gòu)建的流程（如React、Vue、Angular）；
項(xiàng)目擴(kuò)展需要：
- 理解Webpack核心概念（如Babel加載器、Plugin插件），便于項(xiàng)目協(xié)同開(kāi)發(fā)與項(xiàng)目整合；
面試需要：
- 進(jìn)入一線互聯(lián)網(wǎng)公司的必備技能；

3、Webpack搭建React開(kāi)發(fā)環(huán)境步驟

首先要有node環(huán)境，進(jìn)入Node.js的官網(wǎng)，選擇對(duì)應(yīng)系統(tǒng)下載安裝包。安裝node后集成了npm管理器

設(shè)置默認(rèn)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即可，例如：安裝某個(gè)包就變成了 cnpm i packageName

設(shè)置環(huán)境變量

創(chuàng)建項(xiàng)目文件夾，以 myapp 文件為例，該文件即為項(xiàng)目根目錄。打開(kāi)命令提示符，執(zhí)行：

cd myapp

依次完成以下操作：

第一步安裝模塊

創(chuàng)建package.json文件

# 手動(dòng)配置 npm init # 自動(dòng)配置 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相關(guān)

# 安裝 babel和react相關(guān)加載器 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：【依賴安裝到開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境的區(qū)別】

開(kāi)發(fā)環(huán)境，即項(xiàng)目的編碼階段需要的依賴，上線后不需要引用，例如：webpack構(gòu)建工具、babel加載器等，使用 --save 或 -S 命令安裝；
生產(chǎn)環(huán)境，項(xiàng)目上線后開(kāi)始正式提供對(duì)外服務(wù)的階段仍然需要依賴支持，例如：jQuery庫(kù)、路由等，使用 --save-dev 或 -D 命令安裝；

第二步創(chuàng)建目錄結(jié)構(gòu)

項(xiàng)目的目錄結(jié)構(gòu)為：

myapp

? – public [靜態(tài)資源文件目錄](méi)

? – src [ 項(xiàng)目源文件目錄 ]

? – dist [ 打包文件目錄 ]

? – webpack.config.js [ webpack配置文件 ]

? – package.json [ NPM包管理配置文件 ]

? – node_modules [ 項(xiàng)目中的依賴存放目錄 ]

在public目錄下，創(chuàng)建index.html，該文件為項(xiàng)目的默認(rèn)首頁(yè)

<!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目錄下，創(chuàng)建index.js，該文件為項(xiàng)目的入口文件

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

在項(xiàng)目的根目錄下創(chuàng)建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 是 babelloader: 'babel-loader',options: {// babel 轉(zhuǎn)義的配置選項(xiàng)babelrc: false,presets: [// 添加 preset-reactrequire.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屬性有四個(gè)值true | ‘head’ | ‘body’ | false，默認(rèn)是body，即將腳本插入到body的最底部

執(zhí)行打包命令

npx webpack --mode development

配置 npm run build 命令執(zhí)行打包操作：

//在 package.json 文件添加 build 項(xiàng) {"scripts": {"build": "webpack --mode production"} }

執(zhí)行打包命令：

npm run build

第三步搭建本地服務(wù)

安裝依賴

cnpm i webpack-dev-server -D

在webpack.config.js文件中配置本地服務(wù)相關(guān)信息

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

在package.json文件中配置啟動(dòng)命令

{"scripts": {"dev": "webpack-dev-server"} }

執(zhí)行啟動(dòng)服務(wù)命令

npm run dev

注意：

如果服務(wù)器啟動(dòng)后報(bào)錯(cuò)，說(shuō)明webpack和webpack-dev-server版本不兼容，可以降配置安裝

webpack-dev-server@2.9.7

webpack@3.11.0

html-webpack-plugin@3.2.0

總結(jié)

以上是生活随笔為你收集整理的Webpack搭建React开发环境的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Vue3 --- Vite快速创建Vue
下一篇： Excel+SQL数据库连接