當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Webpack搭建React开发环境

發布時間：2024/9/27 编程问答 36 豆豆

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

Webpack搭建React開發環境

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后集成了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 是 babelloader: 'babel-loader',options: {// babel 轉義的配置選項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屬性有四個值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} }

在package.json文件中配置啟動命令

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

執行啟動服務命令

npm run dev

注意：

如果服務器啟動后報錯，說明webpack和webpack-dev-server版本不兼容，可以降配置安裝

webpack-dev-server@2.9.7

webpack@3.11.0

html-webpack-plugin@3.2.0

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vue3 --- Vite快速创建Vue
下一篇：小程序开发(1)-之目录结构和文件说明