Webpack 搭建基础 react 项目环境

现在比较火的前端框架 react 和 vue，大部分时候我们都是通过脚手架进行
搭建的，对于脚手架来说有一个很重要的打包模块 webpack，使用起来确实挺方便的。对于使用脚手架来搭建项目也有弊端，如果我们需要更改配置，怎么办呢？yarn eject 出 webpack 的配置。执行 yarn eject 会将 package.json 文件中，scripts 下的 eject 删除掉，这个过程是不可逆的。我们来看看执行前和执行后的对比。
未执行 yarn eject 前
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
}
执行 yarn eject 后
“scripts”: {
“start”: “node scripts/start.js”,
“build”: “node scripts/build.js”,
“test”: “node scripts/test.js”
},
本文将在后面内容中，介绍如何通过 webpack 搭建一个 react 项目。首先
webpack 有四个核心的概念。入口(entry),出口(output),loader 以及插件
(plugins)。

Webpack 搭建 react 项目步骤

1.检查 node,npm 是否安装

可以在控制台中输入 node -v,和 npm -v 查看

2.全局安装 webpack

npm install --save webpack@5.73.0
npm install --save webpack-cli@4.10.0
由于版本更新过快,可能导致版本不兼容情况，可以添加上版本信息

3.创建文件并初始化项目

创建项目本地文件是必不可少的，通过 mkdir 创建文件，并进入所创建的
文件中，再通过 npm init 初始化项目。以及安装 webpack 到本地项目中：npm install --save webpack@5.73.0、npm install --save webpack-cli@4.10.0 这里与全局安装的 webpack 保持一致。创建 src 和 public 文件夹，在根目录下创建 webpack.config.js，babel.config.js。还需要再 src 下创建 index.js，page.html,在 public 下

4.配置 webpack.config.js 文件

const path = require(“path”)
module.exports={
// 设置执行器入口
entry:“./src/index.js”,
// 设置执行器出口
output:{
filename:“bundle.js”,
path:path.resolve(__dirname+‘/dist’)
} }

5.webpack 中使用 loader

1)安装 css-loader: npm install --save-dev css-loader@6.7.1
2)安装 style-loader: npm install --save-dev style-loader@3.3.1
3) 安装 less 包依赖：npm install --save-dev less@4.1.3 ，npm install
–save-dev less-loader@11.0.0
4)安装分离，压缩插件
optimize-css-assets-webpack-plugin
mini-css-extract-plugin
5) 在 webpack.config.js 中添加代码
rules: [{test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 59: …','css-loader']}̲, {test: /\.cs…/,
use:[MiniCssExtractPlugin,‘style-loader’,‘css-loader’,‘less-loader’]
}]}
plugins:[ new HtmlPlugin({template:“./src/page.html”,
filename:‘./index.html’}),
New MiniCssExtractPlugin({filename:“./css/index1.css” }),
new OptimizeCSSAssetsPlugin() ]

6. Webpack 中使用 DevServer

1)安装依赖：
npm install -g webpack-dev-server@4.9.2
npm install --save-dev webpack-dev-server@4.9.2
2)增加配置
devServer: {
// 首先设置服务器打开目录
static: path.join(__dirname, ‘public’),
// 开启压缩模式
compress: true,
port: 9000,
// 热更新，只对 src 文件下的代码更改有效
hot: true,
// 自动打开浏览器
open: true,
//使用 History 路由模式时，若 404 错误时被替代为 index.html
historyApiFallback: true}

7. webpack 构架一个 React 项目的环境正式开始

1. 安装依赖
   npm install –save @babel/core @babel/preset-env babel-loader
   npm install -D @babel/preset-react@7.17.12
   npm install -S react@18.2.0
   npm install -S react-dom@18.2.0
   npm install –save html-webpack-plugin
   2）增加 jsx 配置
   webpack.config.js 增加
   { test: /.jsKaTeX parse error: Expected 'EOF', got '}' at position 25: …babel-loader'] }̲, { test: /\.(j…/,
   exclude: /node_modules/,
   loader: ‘babel-loader’}
   new HtmlPlugin({template:“./src/page.html”,filename:‘./index.html’})
   还需要对 babel.config.js 进行修改
   module.exports={presets:[ ‘@babel/preset-env’, “@babel/preset-react”]}
   3)接下来就可以写 react 相关代码了 Index.js 代码如下
   import React from “react”;
   import ReactDom from ‘react-dom’
   ReactDom.render(
   react
   ,document.getElementById(“root”))
   搭建 react 基础环境的，就这样结束了。本文只对自己在工作中的一点总结，如有错误请指教。