记录一次react项目配置过程

最新推荐文章于 2025-01-20 15:03:13 发布

weixin_33730836

最新推荐文章于 2025-01-20 15:03:13 发布

阅读量246

点赞数

CC 4.0 BY-SA版权

文章标签： javascript webpack git ViewUI

原文链接：https://juejin.im/post/5bb2d0d8e51d450e697381b9

本文详细介绍了从零开始配置React项目的全过程，包括webpack、babel、eslint等工具的设置，以及如何搭建本地开发服务器。

1.为什么要配置react而不是脚手架

因为要知其然,最好还要知其所以然！

2.配置对象

webpack webpack-dev-server babel eslint

3.配置过程

1.webpack

第一步:引入必须文件

const path = require("path");
const webpack = require("webpack");//为了使用webpack自带的插件
const htmlWebpackPlugin = require("html-webpack-plugin");//为了使用html插件 功能是动态组合html代码和js文件
const miniCssExtractPlugin = require("mini-css-extract-plugin");//分离和压缩css
module.exports = {
    
}
复制代码

第二步:入口文件

entry:{
    index:"./index.js" //这儿的index就是output的[name]
}
复制代码

第三部:loader文件

1. file-loader:

1. context - webpack的跟目录
2. publicPath - 要加在静态资源前面的请求路径
3. name - 输出的文件名
4. outputPath - 输出的路径
复制代码

2. url-loader

1.limit - 一个限度小于直接整成base63=4
2 fallback - 大于限度掉用的loader一本为file-loader
复制代码

module:{
		rules:[{
			test:/(\.scss)$/,
			use:[miniCssExtractPlugin.loader,"sass-loader","css-loader"]
		},{
			test:/(\.js|\.jsx)$/,
			use:["babel-loader"]
		},{
			test:/(\.png|\.jpg)$/,
			use:[{
				loader:"url-loader",
				options:{
					limit:3000,
					fallback:"file-loader",
				}
			}]
		}]
	},
复制代码

第四步: plugin

plugins:[
		new htmlWebpackPlugin({
			template:"./index.html",
			minify:false,
			inject:"body"
		}),
		new miniCssExtractPlugin()
	]
复制代码

第五步:优化配置

optimization:{
		splitChunks:{
			cacheGroups:{
				modules:{
					chunks:"all",
					test:/.*node_modules.*/,
					name:"modules",
				},
				index:{
					chunks:"all",
					test:/\.css$/,
					name:"index",
					enforce:true,
				}
			}
		}
	}
复制代码

第六步:输出

output:{
		filename:"[name].js",
		path:path.join(__dirname,"dist"),/*这个只是编译过后文件的输出目录*/
		/*publicPath:path.join(__dirname,"dist")//这个是在css中的路径字符串基本路劲*/
	}
复制代码

第七部:服务器

//添加mock 在node_modules->webpack-dev-server->.bin->Server.js文件中添加以下代码
let xmDataPath = "E:\\xm\\builder"
app.get('/data/*', (req, res) => {
    res.setHeader('Content-Type', 'application/json');
    //res.end();
    fs.createReadStream(path.join(xmDataPath,req.url)).pipe(res);
});
app.get('/image/*', (req, res) => {
    res.setHeader('Content-Type', 'application/json');
    //res.end();
    fs.createReadStream(path.join(xmDataPath,req.url)).pipe(res);
});
//设置跟目录
devServer:{
    contentBase:"./dist",
    host:"127.0.0.1",
    port:"80"
}
复制代码

配置ESlint

创建配置文件.eslintrc.js

module.exports = {
	 "parserOptions":{
	 	ecmaVersion:[6,7,8],//支持的版本
	 	sourceType:"script",
	 	ecmaFeatures:{
	 		jsx:true,//是否启用jsx
	 	}
	 },
	 parser:"babel-eslint",
	 "env": {//使用环境
        "browser": true,
        "node": true
    },
    "extends": "eslint:recommended",//使用推荐配置
	rules:{

	}
}
复制代码

sublime下安装sublimeLinter
配置如下

{
    "debug": false,
    "delay": 0.25,
    "gutter_theme":"Default",
    "linters": {
        "eslint": {
            "@disable": false,
            "args": [],
            "excludes": []
        }
    }
}
复制代码