Mac OS初始化一个React项目

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内容如下：



    
    
    
    
    


    这是首页

安装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

注意：此时在浏览器输入：http://localhost:8080/有可能出现cannot get，解决方案：

npx webpack server --static src