项目初始化
首先我们创建一个目录，初始化 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文件，加上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.commmon.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-dom
npm 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组件，将组件渲染到页面。因为我是安装的是React18, 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打包。
总结
以上就是webpack5搭建一个简易的react脚手架项目的大概流程，并总结一些webpack5的新特性，后面我将总结一下webpack的打包优化。
项目地址：https://gitee.com/chen-kangsen/react-cli
到此这篇关于webpack5搭建一个简易的react脚手架项目实践的文章就介绍到这了,更多相关webpack5搭建react脚手架内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！