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

1. 创建配置文件.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:{}
}
复制代码

2. sublime下安装sublimeLinter
3. 配置如下

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

git push 到仓库

完毕