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 到倉庫

完畢