共计 1662 个字符，预计需要花费 5 分钟才能阅读完成。
Mac OS 上，初始化一个 React 我的项目
初始化我的项目
npm init -y创立目录
在我的项目根目录下，创立 src 源代码目录和 dist 产品目录创立首页文件
在 src 目录下创立 index.html 和 index.js 文件装置 webpack
cnpm i webpack -D
package.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 -D
package.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 内容如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index 首页 </title>
<script src="../dist/main.js"></script>
</head>
<body>
这是首页
</body>
</html>装置 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 门路
<!-- <script src="../dist/main.js"></script> -->
<script src="/main.js"></script>运行
npm run dev留神 ：此时在浏览器输出：http://localhost:8080/ 有可能呈现cannot get，解决方案：
npx webpack server --static src
正文完
