脚手架工具 react-create-app尽管简单,但是搭建出来的项目太大,如果是小型项目,自己手动搭建反而更好,自主性强,我也更喜欢这种完全掌控整个项目的感觉,奈何从业以来,绝大部分时间都是负责迭代开发的工作,读那些老祖宗代码就够眼疼了,还要时不时去看下,是不是有一些不必要的组件、配置、代码。。。。。真心累,两个项目迭代工作刚结束,后期还没有开始,prd也在等待中,闲来无事,打算自己搭建一个完全属于自己的react项目,以后研究各类js库的时候可以直接引入到自己的项目里面,搭建过程中居然还遇到了一些奇怪的坑,webpack5.x版本与webpack-dev-server3.x版本居然是不兼容的,项目启动会报错,为此耽误了好一会功夫,简单记录一下项目搭建过程,也顺便梳理一下思路,后期打算自己写个脚本来直接生成小react项目。
具体实施情况
1、创建初始文件夹 demo,并初始化
mkdir demo // 创建 demo文件夹
cd demo // 进入 demo文件夹
npm init //初始化 demo文件夹,根目录中会出现 package.json的文件
2、安装项目必要依赖
npm i webpack@4 webpack-cli@3 webpack-dev-server@3 --save-dev // 亲测此搭配无兼容问题 其他搭配可能出现呢不兼容问题
npm i react react-dom -save
npm i @babel/core babel-loader@8 @babel/preset-env html-loader @babel/preset-react html-webpack-plugin -D
3、创建配置文件 webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
filename: "./index.html"
})
],
devServer: {
port: 4000, // 项目启动端口号为4000
contentBase: path.join(__dirname, 'build'),
progress: true, // 显示打包进度条
open: true, // 启动后自动打开浏览器
},
entry: path.join(__dirname, 'src', 'page', 'app', 'index.jsx'), // 入口文件地址
output: {
path: path.join(__dirname, 'build'), // 打包后文件输出地址
filename: 'bundle.js'
},
module: { // 设置各类文件解析文件
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
}
4、根目录下创建 index.html 入口文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
5、根目录创建 src文件夹 ,并在src文件夹下创建page文件夹,page文件夹内创建app文件夹,并创建 index.jsx文件,文件内容如下:
import React from 'react';
import ReactDom from 'react-dom';
class App extends React.Component {
render() {
return (
<h1>
Hello World !
</h1>
)
}
}
ReactDom.render(
<App />,
document.getElementById('app')
);
6、在package.json文件中配置scripts
"scripts": {
"start": "webpack-dev-server --hot --open --mode development",
"bulid": "webpack-dev-server"
},
7、控制台 npm start 就可以启动一个最小化的react的项目了