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"' >> ~/.zshrcsource ~/.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