搭建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 中引入。

javascript 复制代码
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

javascript 复制代码
// 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

javascript 复制代码
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前执行。

javascript 复制代码
  "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

参考资料

【1】https://www.bilibili.com/video/BV1Lo4y1k73W

相关推荐
前端开发爱好者19 分钟前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er23 分钟前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping30 分钟前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
未来之窗软件服务2 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录2 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国2 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸2 小时前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest
姑苏洛言2 小时前
答题抽奖活动小程序技术复盘
前端
砖头拍死你2 小时前
51单片机如何使用printf打印unsigned long的那些事
java·前端·51单片机
用户1512905452203 小时前
css —pointer-events属性_css pointer-events
前端