从零搭建一个 React 项目（非脚手架）
前言
为了实现快速开发，大多数前端开发者在创建 React 项目时都会使用 create-react-app 命令直接安装 React 脚手架。其好处是不用安装或配置 webpack，也不需要关注与 webpack 相关的 loader 或 plugin 。
但是对于前端开发来说，掌握 webpack 必不可少，面试中也是逢面必问。本文主要介绍不使用脚手架从零搭建一个 React 项目，其核心就是如何安装配置 webpack。
1. 创建根目录
创建 ManuallyReact 文件夹，通过编辑器（webstorm 或者 vcode ）打开。
在控制台执行以下命令初始化项目，安装完成之后会自动创建 package.json 文件。
npm init
注意：在执行 npm init 初始化项目时会有一系列配置提示，直接 enter 进入下一步即可。
2. 安装 react
使用 React 框架必须安装 react 和 react-dom 这两个包。
npm i react react-dom
其中 react 是实现虚拟 DOM，react-dom 是实现与原生 DOM 的交互。
3. 安装 webpack
工程化项目必须安装 webpack 打包工具。
在控制台执行以下命令安装 webpack，安装成功后会出现 node_modules 文件夹和 package-lock.json。
npm i webpack@4.32.2 webpack-cli@2.0.9 webpack-dev-server@3.0.0
其中 node_modules 文件夹是 webpack 相关的包依赖，package-lock.json 文件是对包依赖的一些描述（名称、版本、依赖包等）。
注意：在安装 webpack、webpack-cli、webpack-dev-server 这三个包时一定要按照指定的版本安装，如果随意安装，这三个包之间可能会出现版本不兼容的情况。
4. 安装 loaders 和 plugins
webpack 本身只能打包 JS（ES5） 文件，所以如果涉及到 JS ES6 语法和 CSS 样式。就必须安装相关的 loader，以及一些必要的 plugin。
安装 babel 编译 ES6 语法
npm i @babel/core@7.12.3 babel-loader@8.1.0 @babel/preset-react@7.12.1
其中 @babel/core 是核心功能包，babel 从版本 7 开始用 @开头的 scope 包，老版本是babel-core，其他的包都是一样的规律。
babel 中带 preset 的包指的是预设的一些 plugin 集合。比如使用 React 框架就需要安装 @babel/preset-react，其作用是实现 jsx 语法。
安装 loader 编译 CSS 文件
npm i css-loader@5.0.0 style-loader@2.0.0
其中 css-loader 是编译 CSS 文件，style-loader 是将编译好的 CSS 文件插入到 style 中。
安装 plugin 打包 HTML 模板
npm i html-webpack-plugin@4.5.0
注意：在安装 @babel/core 和 @babel/preset-react 这两个包时一定要安装相同大版本的包，比如要么都安装 版本 7，要么都降级到版本 6，否则会报各种错，大概率就是版本不兼容导致。
安装完成之后 package.json 文件，内容如下：
{
"name": "manuallyreact",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"css-loader": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"style-loader": "^2.0.0",
"webpack": "^4.44.2",
"webpack-cli": "^2.0.9",
"webpack-dev-server": "^3.0.0"
}
}
5. 配置 webpack
安装了相关的依赖之后需要配置 webpack。在根目录下新建 webpack.config.js 文件，内容如下。
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:"main.js"
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
},
module:{
rules:[
{
test: /\.js$/,
exclude: path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, 'src'),
loader:'babel-loader',
options:{
presets: [
"@babel/react"
]
}
},
{
test: /\.css$/,
use:['style-loader','css-loader'] // 从右到左执行，所以注意顺序
}
]
},
plugins:[new htmlWebpackPlugin({
template:path.join(__dirname,'./public/index.html'),
filename: 'index.html'
})
],
}
6. 创建项目
在根目录下新建 public 文件夹，在该文件夹下新建 index.html，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Manually React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
在根目录下新建 src 文件夹，在 src 文件夹下：
新建 index.js 作为入口文件。
新建 index.css 用于编写样式。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const App = (
<div className="border">
<h1>Manually React</h1>
</div>
)
ReactDOM.render(App,document.getElementById("root"));
index.css
.border{
border: 1px solid red;
border-radius: 10px;
margin: 10px;
text-align: center;
}
执行 npm start 后，最终效果：
看完后最好亲自动手实践一下。
686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
