使用webpack搭建react项目

初始化项目空间

新建一个项目目录，在目录下执行：npm init -y
此时将会生成 package.json 文件
之后新建 src、config（配置webpack）文件夹，新建index.html文件

安装依赖文件

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader path -D
npm i react react-dom react-router-dom

在src目录配置index.js文件

import React from 'react';
import ReactDOM from 'react-dom';ReactDOM.render(<React.StrictMode><div>你好，React-webpack5-template</div></React.StrictMode>,document.getElementById('root')
);

在src目录配置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>react-app</title></head><body><div id="app"></div></body>
</html>

配置config中webpack配置文件

1、新建webpack.base.conf.js文件，部分代码仅供参考

"use strict";
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {// 入口起点entry: {app: "./src/index.js",},// 输出output: {path: path.resolve(__dirname, "../dist"),filename: "[name].js",},// 解析resolve: {extensions: [".ts", ".tsx", ".js", ".json"],alias: {"@components": path.join(__dirname, "../src/components"),"@utils": path.join(__dirname, "../src/utils"),"@pages": path.join(__dirname, "../src/pages"),},},// loadermodule: {rules: [{test: /\.js|jsx$/,exclude: /(node_modules|bower_components)/, // 屏蔽不需要处理的文件（文件夹）（可选）loader: "babel-loader",},{//支持less// npm install style-loader css-loader less-loader less --save-devtest: /\.(le|c)ss$/, // .less and .cssuse: ["style-loader", "css-loader", "less-loader"], // 创建的css文件存在html的头部},],},// 插件plugins: [new HtmlWebpackPlugin({filename: "index.html",template: "src/index.html",inject: "body",hash: false,minify: {collapseWhitespace: true, //把生成文件的内容的没用空格去掉，减少空间},}),],
};

2、新建用于开发环境的webpack.dev.conf.js 文件

"use strict";
const { merge } = require("webpack-merge");
const baseWebpackConfig = require("./webpack.base.conf");
const path = require("path");
const webpack = require("webpack");module.exports = merge(baseWebpackConfig, {// 模式mode: "development",// 调试工具devtool: "inline-source-map",// 开发服务器devServer: {static: path.resolve(__dirname, "static"),historyApiFallback: true, // 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.htmlcompress: true, // 启用gzip压缩hot: true, // 模块热更新，取决于HotModuleReplacementPluginhost: "127.0.0.1", // 设置默认监听域名，如果省略，默认为“localhost”port: 8888, // 设置默认监听端口，如果省略，默认为“8080”},optimization: {nodeEnv: "development",},
});

3、新建webpack.prod.conf.js文件

"use strict";
const { merge } = require("webpack-merge");
const baseWebpackConfig = require("./webpack.base.conf");const path = require("path");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");module.exports = merge(baseWebpackConfig, {// 模式mode: "production",// 调试工具devtool: "source-map",// 输出output: {path: path.resolve(__dirname, "../dist"),filename: "js/[name].[chunkhash].js",},// 插件plugins: [new CleanWebpackPlugin()],// 代码分离相关optimization: {nodeEnv: "production",runtimeChunk: {name: "manifest",},splitChunks: {minSize: 30000,minChunks: 1,maxAsyncRequests: 5,maxInitialRequests: 3,name: false,cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name: "vendor",chunks: "initial",},},},},
});

新建.babelrc文件

{"presets": ["latest", "react", "stage-2"],"plugins": []
}

修改package.json中的script代码

  "scripts": {"dev": "webpack-dev-server --hot  --config config/webpack.dev.conf.js","start": "npm run dev","build": "webpack --progress --colors --config config/webpack.prod.conf.js"},

此时，package.json中部分代码如下

{"name": "webpack-react-demo","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "webpack-dev-server --hot  --config config/webpack.dev.conf.js","start": "npm run dev","build": "webpack --progress  --config config/webpack.prod.conf.js"},"license": "ISC","devDependencies": {"babel-core": "^6.26.3","babel-loader": "^7.1.5","babel-plugin-import": "^1.13.5","babel-preset-latest": "^6.24.1","babel-preset-react": "^6.24.1","babel-preset-stage-0": "^6.24.1","clean-webpack-plugin": "^4.0.0","css-loader": "^6.7.1","file-loader": "^6.2.0","html-webpack-plugin": "^5.5.0","less-loader": "^11.0.0","node-less": "^1.0.0","style-loader": "^3.3.1","url-loader": "^4.1.1","webpack": "^5.74.0","webpack-cli": "^4.10.0","webpack-dev-server": "^4.10.1","webpack-merge": "^5.8.0"},"dependencies": {"less": "^4.1.3","react": "^18.2.0","react-dom": "^18.2.0","react-router-dom": "^5.1.2"}
}

在项目中添加代码规范检测

yarn add babel-eslint --save-dev
yarn add @umijs/fabric -D   //@umijs/fabric一个包含 prettier，eslint，stylelint 的配置文件合集。
yarn add prettier --save-dev  //默认@umijs/fabric已经给我们安装了需要的依赖，但是默认是没有pretter。

新增如下文件

1、.eslintrc.js文件

module.exports = {env: {browser: true,es2021: true,},extends: [require.resolve("@umijs/fabric/dist/eslint")],parserOptions: {ecmaFeatures: {jsx: true,},ecmaVersion: 12,sourceType: "module",},parser: "babel-eslint",globals: {gtag: true,$: true,_g_deflang: true,require: true,envConfig: true,process: true,React: true,ysf: true,initNECaptcha: true,initNECaptchaWithFallback: true,},// plugins: ["react"],rules: {//"react/jsx-uses-react": 2,"no-nested-ternary": 0, // 允许嵌套三元表达式"no-script-url": 0, // 允许javascript:;"prefer-destructuring": 0, // 关闭强制使用解构"no-plusplus": 0, // 允许使用++和--的操作"array-callback-return": 0, // 允许数组map不返回值"consistent-return": 0,"no-param-reassign": 0, // 允许修改函数形参"no-unused-expressions": 0,"no-restricted-syntax": 0,"react/prop-types": 0,"no-prototype-builtins": 0,"react/no-deprecated": 0, // 关闭react弃用检测"react/no-string-refs": 0,"no-useless-escape": 0,},
};

2、.eslintignore文件

/lambda/
/scripts/*
.history
serviceWorker.ts
/config/*
/public/*
*.js

3、.prettierrc.js文件

module.exports = {singleQuote: true,jsxSingleQuote: true,semi: true,
};

4、.prettierignore文件

**/*.svg
package.json
.umi
.umi-production
/dist
.dockerignore
.DS_Store
.eslintignore
*.png
*.toml
docker
.editorconfig
Dockerfile*
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
.history

5、.stylelintrc.js文件

const fabric = require('@umijs/fabric');
module.exports = {...fabric.stylelint,
};

替换package.json中命令

  "scripts": {"lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier","lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ","lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style","lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src","lint:prettier": "prettier --check \"src/**/*\" --end-of-line auto","lint:style": "stylelint --fix \"src/**/*.less\" --syntax less","prettier": "prettier -c --write \"src/**/*\"","precommit": "lint-staged","precommit:fix": "npm run lint:fix && npm run prettier && npm run lint:prettier && npm run lint:style","dev": "webpack-dev-server --hot  --config config/webpack.dev.conf.js","start": "npm run dev","build": "webpack --progress  --config config/webpack.prod.conf.js"},

添加提交前检测

#使用husky lint-staged在commit的时候校检你提交的代码是否符合规范
yarn add husky lint-staged -D

package.json新增如下代码：

  "lint-staged": {"**/*.less": "stylelint--syntaxless","**/*.{js,jsx,ts,tsx}": "npmrunlint-staged:js","**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier--write"]},"husky": {"hooks": {"pre-commit": "npmrunlint-staged"}}

使用webpack搭建react项目相关推荐

react打包后图片丢失_使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
react安装_超全面详细一条龙教程！从零搭建React项目全家桶（上篇）
React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高.很多初学者纠结一开始是学react还是vue.个人觉得,有时间的话,最好两个都掌握一下.从学 ...
Webpack搭建React开发环境
Webpack搭建React开发环境 1.React环境搭建实现React开发的三种方式: (1)使用CDN的方式 <script src="https://unpkg.com/re ...
2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶
React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...
从零开始使用webpack 搭建vue项目
从零开始使用webpack 搭建vue项目 1 创建项目 npm init 生成 package.json 创建 index.html webpack.confug.js project-name|- ...
webpack搭建vue项目开发环境【文档向学习】
为何有这篇文章各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
[react] 使用webpack打包React项目，怎么减小生成的js大小？
[react] 使用webpack打包React项目,怎么减小生成的js大小? 打包优化的问题解决思路: 代码压缩:UglifyjsWebpackPlugin 代码分组 commonsChunkPlu ...
搭建react项目教程（二）
搭建react项目教程(二) 一:概述二:配置 1:配置依赖包 2:添加与后台交互的配置文件 3:封装API调用方法 4:与后台交互 5:启动项目验证接口一:概述 1:书接上文搭建react项目教 ...