关于react.js: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

Mac OS 上，初始化一个 React 我的项目