Mac OS上，初始化一个React项目
初始化项目
npm init -y创建目录
在项目根目录下，创建src源代码目录和dist产品目录创建首页文件
在src目录下创建index.html和index.js文件安装webpack
cnpm i webpack -Dpackage.json内容如下：
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.66.0"
}
}安装webpack-cli
cnpm i webpack-cli -Dpackage.json内容如下：
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.66.0",
"webpack-cli": "^4.9.1"
}
}设置环境变量
echo 'export PATH="./node_modules/.bin:$PATH"' >> ~/.zshrc
source ~/.zshrc新建webpack配置文件
在项目根目录下新建：webpack.config.js内容如下：
//向外暴露一个打包的配置对象；因为webpack是基于Node构建的，所以，webpack支持所有Node Api和语法
module.exports = {
mode : 'development' //'development' or 'production'
}注意：webpack4.x提供了约定大于配置的概念，目的是为了尽量减少配置文件的体积
- 打包入口：
src->index.js - 打包的输出文件是
dist->main.js - 4.x中新增了
mode选项，可选的值为：development和production
执行打包
webpack显示网页
index.html内容如下：
Index 首页
这是首页
安装webpack-dev-server
cnpm i webpack-dev-server -D在package.json中新增
"dev":"webpack-dev-server"内容如下：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server"
},修改index.html里面的js路径
运行
npm run dev【Mac OS初始化一个React项目】注意：此时在浏览器输入：
http://localhost:8080/有可能出现cannot get，解决方案：npx webpack server --static src推荐阅读
- react 与 angular
- React项目build失败之MiniCssExtractPlugin
- React项目构建常用命令
- React 父组件如何调用子组件方法
- 学习react源码 征服面试官
- 搞定react源码 惊艳面试官
- 2022前端开发社招React面试题 附答案
- 2022前端React面试题 附答案
- 人人都能读懂的react源码解析(大厂高薪必备)2.react心智模型(来来来,让大脑有react思维吧)