搭建React开发环境-webpack实现

周末在家学会React前端知识，记录下来，方便备查。
webpack版本：webpack5
编译器：vscode

第一步、新建项目及初始化

1）新建项目文件夹
可命名为 my_webpack
2）初始化项目
使用命令 npm init -y，即可生成 package.json 文件夹，如下图所示。

在这里插入图片描述

第二步、安装插件

1）安装react 插件
执行命令 npm i --save react react-dom 执行完毕后，在目录下会生成 node_modules 文件夹和 package_lock.json文件，如下图所示。

在这里插入图片描述
2）安装 webpack 插件
执行命令 npm i -D webpack webpack-cli，安装如下图所示。

新建 webpack配置文件，命名为 webpack.config.js

3）安装babel插件
执行命令 npm i -D babel-loader @babel/core @babel/preset-react @babel/preset-env，并在 webpack.config.js 文件module中设置规则，如下图所示。
在这里插入图片描述

4）安装html-webpack-plugin插件
为实现在index.html 中自动引入 hash后的js文件
执行命令npm i -D html-webpack-plugin，并在 webpack.config.js 中引入。

const HtmlWebpackPlugin = require('html-webpack-plugin');// webpack.config.js 中添加以下内容
plugins:[new HtmlWebpackPlugin({template: './src/index.html'})]

第三步、主体各个文件

项目目录如下图所示。
在这里插入图片描述

项目主要由以下几部分组成
dist 文件为 build 生成的js 和html
node_modules文件为下载的依赖
public文件为公共的 index文件
src文件为jsx css等文件

以下分别是各个文件的内容
package.json

// package.json 文件内容，主要为自动生成
{"name": "my_webpack","version": "1.0.0","description": "","main": "index.js","scripts": {"prebuild":"rimraf ./dist","build": "webpack --config ./webpack.config.js"},"keywords": [],"author": "","license": "ISC","dependencies": {"react": "^18.2.0","react-dom": "^18.2.0"},"devDependencies": {"@babel/core": "^7.23.7","@babel/preset-env": "^7.23.7","@babel/preset-react": "^7.23.3","babel-loader": "^9.1.3","webpack": "^5.89.0","webpack-cli": "^5.1.4","webpack-dev-server": "^4.15.1"}
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports={// 环境mode:'development',// 入口entry:'./src/index.jsx',// 输出文件配置信息output: {// 文件名添加哈希filename : 'bundle.[hash].js',// 指定文件目录path: path.resolve(__dirname,'dist')},resolve:{// 指定解析文件的格式extensions:['.jsx','...']},module:{// 设置规则，不同的加载器rules:[{test: /\.jsx$/,use:{loader : 'babel-loader',// preset-env处理浏览器新的规则options: {presets:['@babel/preset-react','@babel/preset-env']}}},{test:/\.css$/,use:['style-loader','css-loader']}]},plugins:[new HtmlWebpackPlugin({template: './public/index.html'})]
}

第四步、运行

执行编译命令 ==npm run build ==，检查配置并运行。
在这里插入图片描述
在浏览器中输入 http://localhost:8080/ 即可查看效果。

1）安装 rimraf 插件
为保证每次执行前，删除之前生成的文件，可执行命令npm -i -D rimraf，在 package.json 文件中添加 prebuild ，即在build前执行。

  "scripts": {"prebuild":"rimraf ./dist","build": "webpack --config ./webpack.config.js"}

2）更改自动刷新
安装webpack-dev-server插件，可执行命令npm i -D webpack-dev-server

异常处理

【1】npm版本
报错：This is probably not a problem with npm. There is likely additional logging output above
处理方案：
// 清除缓存
npm cache clear --force
// 重装npm
npm install
【2】变量输入错误
报错：Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
configuration.output has an unknown property ‘patch’. These properties are valid:
处理方案
变量path敲错了，写成了patch，改成path
【3】缺少插件
报错：Module not found: Error: Can’t resolve ‘style-loader’ in ‘D:\MyLean\my_webpack’
处理方案
安装插件，执行命令 npm install --save-dev style-loader