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": []}} } 復制代碼

git push 到倉庫

完畢

轉載于:https://juejin.im/post/5bb2d0d8e51d450e697381b9

總結

以上是生活随笔為你收集整理的记录一次react项目配置过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。