使用webpack让React模块化

前言

学无止境，无止境学。坚持每天学点编程知识，坚持每天写点小文章，坚持每天进步一点点。大家好，我是张大鹏，喜欢学习和分享，希望能够通过此公众号，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。

乾坤未定，你我皆是黑马。大鹏一日同风起，扶摇直上九万里。宝剑锋从磨砺出，梅花香自苦寒来。不积跬步，无以至千里，不积小流无以成江海。

如果有多余的时间，就坚持学习吧，小时候学习改变命运，长大了学习丰富内涵，老了学习带来宁静。活到老，学到老，我能行！

概述

《React零基础入门班》收费说明：

时长：10节课

价格：1000元

内容：React从入门到项目实战

上课方式：腾讯会议小班教学

本篇文章是《React零基础入门班》的第4篇文章，前面还有：

《第一个React程序》

《React常用方法》

《React使用JSX开发菜谱应用》

本篇将介绍如何使用webpack从0构建一套关于React的基本项目，并进行模块化开发，最终将代码打包为一个JS文件，并在HTML中引入该JS文件实现项目的预览。

React模块化开发

创建项目

mkdir react_app

cd react_app

安装React

npm init -y

npm install react react-dom serve

目录结构

首页HTML

修改：index.html

React菜谱

准备数据

修改：recipes.json

[

{

"name": "梅菜扣肉",

"ingredients":[

{"name":"梅菜", "amount":1, "measurement":"千克"},

{"name":"五花肉", "amount":1, "measurement":"千克"}

],

"steps":[

"第一步：将五花肉水煮去腥",

"第二步：炒菜"

]

},

{

"name": "东坡肉",

"ingredients":[

{"name":"梅菜", "amount":1, "measurement":"千克"},

{"name":"五花肉", "amount":1, "measurement":"千克"}

],

"steps":[

"第一步：将五花肉水煮去腥",

"第二步：炒菜"

]

}

]

菜谱组件

菜谱组件主要包括：

展示菜名

展示食材

展示实现步骤

渲染食材：

{ ingredients.map( ( ingredient, index ) =>

( { ingredient.name}))}

渲染烹饪步骤：

{ steps.map( ( step, index ) => ( { step}))}

修改：Recipe.js

import React from 'react';

// 菜谱组件

export default function Recipe ( { name, ingredients, steps } )

{

return (

{ name }

{ ingredients.map( ( ingredient, index ) => ( { ingredient.name}))}

烹饪步骤

{ steps.map( ( step, index ) => ( { step}))}

)

}

菜谱组件的代码有点多，我们还可以拆分出食材组件和步骤组件。食材组件专注于处理食材相关的内容，步骤组件专注于处理步骤相关的内容。

食材组件

修改：Ingredients.js

import React from 'react';

// 食材组件

export default function Ingredient ( { amount, measurement, name } )

{

return (

)

}

食材列表组件

修改：IngredientsList.js

import React from 'react';

import Ingredient from './Ingredients';

// 食材列表组件

export default function IngredientList ( { ingredients } )

{

return (

{ ingredients.map( ( ingredient, index ) => (

))}

)

}

步骤组件

修改：Instructions.js

import React from 'react';

// 步骤组件

export default function Instructions ( { title, steps } )

{

return (

{ title }

{ steps.map( ( step, index ) => (

{ step}

))}

)

}

优化菜谱组件

修改：Recipe.js

import React from 'react';

import IngredientList from './IngredientsList';

import Instructions from './Instructions';

// 菜谱组件

export default function Recipe ( { name, ingredients, steps } )

{

return (

{ name }

)

}

菜单组件

修改：Menu.js

import React from "react"

import Recipe from "./Recipe"

// 菜单组件

export default function Menu ( { recipes } )

{

return (

菜单列表

{ recipes.map( ( recipe, index ) => (

))}

)

}

入口程序

修改：index.js

import React from "react";

import { render } from "react-dom";

import Menu from "./components/Menu";

import data from "./data/recipes.json";

render(, document.getElementById("app"))

构建项目

安装依赖

npm install --save-dev webpack webpack-cli

npm install --save-dev babel-loader @babel/core

npm install --save-dev @babel/preset-env @babel/preset-react

webpack配置文件

var path = require("path");

module.exports = {

entry: "./src/index.js",

output: {

path: path.join(__dirname, "dist", "assets"),

filename: "bundle.js",

},

module: {

rules: [

{

test: /\.js$/,

exclude: /(node_modules)/,

use: {

loader: "babel-loader",

options: {

presets: ["@babel/preset-env", "@babel/preset-react"],

},

},

},

{

test: /\.css$/i,

use: ["style-loader", "css-loader"],

},

],

},

};

babel配置文件

新增：.babelrc

{

"presets": ["@babel/preset-env","@babel/preset-react"]

}

构建应用

npx webpack --mode development

在package.json中添加：

"scripts": {

"build": "webpack --mode production"

}

之后可以执行命令：

npm run build

运行程序

将dist/assets/boundle.js复制到index.html的同级目录，修改index.html引用该js文件：

React菜谱

然后在vscode用使用open in live server打开，预览程序：

完整代码

目录结构

package.json

{

"name": "react_app",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"build": "webpack --mode production",

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC",

"dependencies": {

"react": "^18.2.0",

"react-dom": "^18.2.0",

"serve": "^14.1.2"

},

"devDependencies": {

"@babel/core": "^7.20.12",

"@babel/preset-env": "^7.20.2",

"@babel/preset-react": "^7.18.6",

"babel-loader": "^9.1.2",

"webpack": "^5.75.0",

"webpack-cli": "^5.0.1"

}

}

index.html

React菜谱

var path = require("path");

module.exports = {

entry: "./src/index.js",

output: {

path: path.join(__dirname, "dist", "assets"),

filename: "bundle.js",

},

module: {

rules: [

{

test: /\.js$/,

exclude: /(node_modules)/,

use: {

loader: "babel-loader",

options: {

presets: ["@babel/preset-env", "@babel/preset-react"],

},

},

},

{

test: /\.css$/i,

use: ["style-loader", "css-loader"],

},

],

},

};

.babelrc

{

"presets": ["@babel/preset-env","@babel/preset-react"]

}

src/index.js

import React from "react";

import { render } from "react-dom";

import Menu from "./components/Menu";

import data from "./data/recipes.json";

render(, document.getElementById("app"))

src/data/recipes.json

[

{

"name": "梅菜扣肉",

"ingredients":[

{"name":"梅菜", "amount":1, "measurement":"千克"},

{"name":"五花肉", "amount":1, "measurement":"千克"}

],

"steps":[

"第一步：将五花肉水煮去腥",

"第二步：炒菜"

]

},

{

"name": "东坡肉",

"ingredients":[

{"name":"梅菜", "amount":1, "measurement":"千克"},

{"name":"五花肉", "amount":1, "measurement":"千克"}

],

"steps":[

"第一步：将五花肉水煮去腥",

"第二步：炒菜"

]

}

]

src/components/Ingredients.js

import React from 'react';

// 食材组件

export default function Ingredient ( { amount, measurement, name } )

{

return (

)

}

src/components/IngredientsList.js

import React from 'react';

import Ingredient from './Ingredients';

// 食材列表组件

export default function IngredientList ( { ingredients } )

{

return (

{ ingredients.map( ( ingredient, index ) => (

))}

)

}

src/components/Instructions.js

import React from 'react';

// 步骤组件

export default function Instructions ( { title, steps } )

{

return (

{ title }

{ steps.map( ( step, index ) => (

{ step}

))}

)

}

src/components/Recipe.js

import React from 'react';

import IngredientList from './IngredientsList';

import Instructions from './Instructions';

// 菜谱组件

export default function Recipe ( { name, ingredients, steps } )

{

return (

{ name }

)

}

src/components/Menu.js

import React from "react"

import Recipe from "./Recipe"

// 菜单组件

export default function Menu ( { recipes } )

{

return (

菜单列表

{ recipes.map( ( recipe, index ) => (

))}

)

}

总结