现在比较火的前端框架 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 项目的环境正式开始

安装依赖
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 基础环境的，就这样结束了。本文只对自己在工作中的一点总结，如有错误请指教。

Webpack 搭建基础 react 项目环境相关推荐

从零开始搭建一个react项目
Nav logo 120 发现关注消息 4 搜索从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
React-从0到1搭建一个React项目（一）
文章目录架构介绍第三方组件库项目准备环境准备使用create-react-app初始化项目创建项目目录结构安装第三方库利用工作之余的时间学习了react,今年一回来,部门要在公众号上面 ...
git maven 一键部署_Jenkins Git Maven搭建自动化部署项目环境邮件通知
简介折腾了两个晚上,趁着今晚比较有空,把jenkins+git+maven搭建自动化部署项目环境搭建的过程记录一下,这里我把github作为git的远程仓库(https://github.com/j ...
Jenkins 之单节点对接GitHub搭建自动化部署项目环境与实战测试（三）
Jenkins 之单节点对接GitHub搭建自动化部署项目环境与实战测试 (三) 目录 Jenkins 之单节点搭建自动化部署项目环境与实战测试 (三) Jenkins 服务器环境 ...
如何搭建一个react项目？
使用react很长时间,写个搭建项目的文档,用于新项目的快速启动. 本项目使用的技术栈: create-react-app react-router ant-design react-redux 一. ...
使用express+webpack搭建一个小项目
本项目想实现一个小网站, css方面:带reset.css,能使用sass语法: js方面:能使用es6语法: 模板方面:有可继承的模板,公用部分可提取公用的模板: 项目实现热启动: 实现思路: 使用 ...
React入门：从零搭建一个React项目
一.初始化项目新建文件夹,文件名firstreact 文件夹名称不要用react,node这类关键字,后面使用插件时会发生错误. init项目环境,项目信息可默认或自行修改 mkdir firstr ...
webpack创建html项目,从零开始其于webpack搭建bootstrap 4项目
环境与目录与初始化首先确认安装node环境,不多说,运行node -v我的是v10.15.3. 其次在要创建项目的目录运行: mkdir bs4 cd bs4 新建了bs4目录并进入此目录后,初始化 ...
史上最详细Windows版本搭建安装React Native环境配置
说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特 ...

Webpack 搭建基础 react 项目环境