本文详细介绍如何使用 Webpack 5 从零搭建一个简易的 React 项目脚手架。内容涵盖项目初始化、Webpack 核心配置、开发服务器启动、CSS/Sass 样式处理、React 18 兼容配置以及 Babel 转译。重点解析了 HMR 热模块替换机制的配置方法，并演示了如何配置生产环境打包命令，最终实现一个具备开发调试与发布能力的完整前端工程结构。
项目初始化
首先，我们需要创建一个项目目录并执行 npm 初始化命令，从而生成 package.json 文件。
mkdir react-cli
cd react-cli
npm init -y安装 webpack
接下来安装 webpack 及其相关依赖。其中，webpack-dev-server 用于启动本地开发服务器，而 webpack-merge 则用于合并公共配置文件。
npm install webpack webpack-cli webpack-dev-server webpack-merge -D执行上述操作后，项目目录结构大致如下所示。
react-cli
|- node_modules
|- package.json
|- package-lock.json搭建脚手架目录结构
随后，我们将构建如下的目录结构、文件及内容。
react-cli
|- node_modules
|- package.json
|- package-lock.json
+ |- public
+ |- index.html //入口文件
+ |- src
+ |- App.js
+ |- index.css
+ |- App.scss //测试sass
+ |- index.js
+ |- webpack.common.js //开发和生产环境的公共配置
+ |- webpack.prod.js //开发环境的配置
+ |- webpack.dev.js //生产环境的配置 public 目录下 index.html 的内容如下：
<!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-cli</title>
</head>
<body>
<div id="root"></div>
</body>
</html>src 目录下 index.js 的内容如下：
const root = document.getElementById("root");
root.innerHTML = "cks";开启本地服务
首先安装 html-webpack-plugin 插件。该插件会自动生成一个 HTML5 文件，并在 body 中使用 script 标签引入所有由 webpack 生成的 bundle 文件。
npm i html-webpack-plugin -D
复制代码webpack.common.js 中的公共配置如下：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
index: "./src/index.js",
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html"
})
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
}
};
webpack.dev.js 的配置如下，我们利用 webpack-merge 将公共配置合并其中：
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common.js");
module.exports = merge(baseConfig, {
mode: "development", //开发环境
devtool: "inline-source-map" //可以查看代码报错的位置
});修改 package.json 文件，在 scripts 中添加 dev 命令。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.dev.js"
},然后在控制台执行 npm run dev 并回车，访问 http://localhost:8080 。如果页面显示“cks”，则证明本地服务开启成功。更多详细配置可查阅 webpack 官网 webpack.docschina.org/guides/ 。
配置css&sass
我们安装样式文件相关的 loader。在 webpack 5 中，可以使用内置的 Asset Modules 处理图像和字体，因此无需额外安装相关依赖。
npm install --save-dev style-loader css-loader sass sass-loader
修改 webpack.common.js 文件：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
index: "./src/index.js",
},
module: {
rules: [
{
test: /css$/i, //匹配css、scss文件
use: ["style-loader", "css-loader", "sass-loader"] // 注意执行顺序是后往前
},
{
test: /.(png|jpg|jpeg|svg|gif)$/i,
type: "asset/resource"
},
{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource"
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html"
})
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
}
};经过上述配置，css 和 sass 样式文件即可正常使用。
安装react的相关依赖
我们需要在生产环境中安装 react 和 react-dom。由于 react 的编译依赖 babel，因此还需安装 babel 相关依赖。babel 主要包含以下部分：
- "babel-loader": 用于转义 js 文件代码的 loader
- "@babel/core": babel 核心库
- "@babel/preset-env": 负责将 ES6 代码转换为 ES5
- "@babel/preset-react": 负责将 JSX 转换为函数
npm install --save react react-domnpm install babel-loader @babel/core @babel/preset-env @babel/preset-react -D修改 webpack.common.js 文件，添加 babel 的 loader。当然，也可以使用 .babelrc 配置文件的形式。
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
index: "./src/index.js",
},
resolve: {
extensions: [".js", ".json", ".jsx"],
},
module: {
rules: [
{
test: /css$/i,
use: ["style-loader", "css-loader", "sass-loader"] // 注意执行顺序是后往前
},
{
test: /.(png|jpg|jpeg|svg|gif)$/i,
type: "asset/resource"
},
{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource"
},
{
test: /\.js|jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html"
})
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
}
};随后在 src 的 index.js 中导入 App 组件，并将组件渲染到页面。由于安装的是 React 18，React 18 不再支持 ReactDOM.render，而是改用 createRoot。更多详情请查看 reactjs.org/link/switch… 。我们将 index.js 的代码修改为：
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App />);在浏览器中打开 http://localhost:8080/ ，若得到以下内容，则证明添加 react 成功。
项目添加热更新
HMR 全称为 Hot Module Replacement ，中文意思为热模块替换。这是 webpack 提供的最有用的功能之一。它允许在运行时替换、添加或删除各种模块，而无需进行完全刷新或重新加载整个页面。从 webpack-dev-server v4.0.0 开始，热模块替换默认开启。如下开启热模块替换：
devServer: {
hot: true,
}上述配置默认已开启，因此无需额外配置。但需注意，该设置仅对样式文件进行热更新，修改 jsx 或 js 文件时仍会重新刷新页面。因此，我们需要修改 src 的 index.js 文件以实现 react 的热更新。
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App />);
// 如果启动webpack热更新，则会执行一下代码
if (module.hot) {
module.hot.accept("./App.js", () => {
const NextApp = require("./App.js").default;
// 再次挂在到dom元素上
root.render(<NextApp />)
})
}生产环境打包
我们在 webpack.prod.js 中添加以下代码以进行简单打包。更多打包优化策略可查看 webpack.docschina.org/guides/。
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common.js");
module.exports = merge(baseConfig, {
mode: "development", //开启生产环境
output: {
clean: true // webpack5的新特性，在生成文件之前清空 output 目录
}
});同时修改 package.json 文件代码，添加打包命令：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
}然后执行 npm run build 进行打包。
总结
以上就是使用 webpack 5 搭建一个简易 react 脚手架项目的大概流程，并总结了一些 webpack 5 的新特性。后续我将总结 webpack 的打包优化内容。
项目地址：https://gitee.com/chen-kangsen/react-cli
到此这篇关于 webpack 5 搭建一个简易的 react 脚手架项目实践的文章就介绍到这了，更多相关 webpack 5 搭建 react 脚手架内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！