新建項(xiàng)目

? 項(xiàng)目腳手架搭建? react

?? ? 相關(guān)文件

? ? ? ? webpack.config.js

?? ? ? ? ? 使用相關(guān)插件

? ? ? ? ? ? ? path

? ? ? ? ? ? ? html-webpack-plugin

? ? ? ? ? ? ? ? html文件處理插件

? ? ? ? ? ? ? clean-webpack-plugin

? ? ? ? ? ? ? ? 清除上次打包文件插件

? ? ? ? ? ? ? copy-webpcak-plugin

?? ? ? ? ? ? ? ? 打包時(shí)需要復(fù)制的相關(guān)文件的插件（比如一些報(bào)表文件模版）

? ? ? ? ? ? ? speed-measure-webpack-plugin

?? ? ? ? ? ? ? ? 速度測(cè)量插件? （const? SpeedMeasurePlugin=require("speed-measure-webpack-plugin");? const?smp=newSpeedMeasurePlugin();? const?webpackConfig=smp.wrap({}）

? ? ? ? ? ? ? happypack

? ? ? ? ? ? ? ? 一些loader進(jìn)程管理

? ? ? ? ? ? ? 打包配置

?? ? ? ? ? ? ? ? {

mode:’環(huán)境設(shè)置’，

? entry：‘入口文件設(shè)置’倒庵，

? output：｛path：path.resovle(__dirname,’dist’),filename:’main_[hash].js’,publicPath:’根據(jù)環(huán)境設(shè)置url前綴（接口域名代理字符）’｝褒墨，

? models：｛rules：［

說明：｛

? test：‘正則匹配／.js／’

? exclude：‘排除。擎宝。貌亭。（可以設(shè)置后綴名或者文件路徑）’

? include：‘包含。认臊。圃庭。（可以設(shè)置后綴名或者文件路徑）’

? loader：‘loader設(shè)置url－loader’或者use：［loader：‘? ’，oprios：｛plugins：［插件設(shè)置］或者其他設(shè)置｝］（use［可以設(shè)置happy pack插件：happypack/loader ? id = ‘happypack插件配置的id’］）

｝

］｝失晴，（loader配置）

? ? （loader配置順序：如剧腻，url-loader,babel-loader,style-loader,css-loader,file-loader）

? resolve：｛extensions：［’js’,’json’,’jsx’,’css’］｝，（在導(dǎo)入沒有帶后綴名的文件時(shí)涂屁，嘗試在文件加入上面后綴名訪問）

? plugins：［］? ? （插件配置）

}

? ? ? ? bable.config.js

?? ? ? ? ? 相關(guān)插件? (用法function(api){ api.cache(true);

? ? ? ? ? ? ? presets：［

[‘@babel/preset-env’书在，

?? ? ? ? ? ? ? ? {‘targets’：｛’browsers’:["last 2 versions”,"safari >= 7”,”ie >=9”,”chrome >=49”]｝}

],

?? ? ? ? ? ? ? ? '@babel/preset－react’

? ? ］，

? ? ? ? ? ? ? return { “plugins”:{

? ? ? ["@babel/plugin-proposal-decorators", { "legacy": true }],(類裝飾器? 舊：設(shè)置legacy時(shí)需要loose支持拆又，有順序)

?? ? ? ? ? ? ? @babel/plugin-proposal-dynamic-import,（import處理插件）

?? ? ? ? ? ? ? @bacel/plugin-transform-runtime儒旬，（將helper和polypill都改為從一個(gè)統(tǒng)一的地方引入，引入的對(duì)象和全局變量完全隔離）

["@babel/plugin-proposal-class-properties", { "loose" : true }],(解析類的屬性)

?? ? ? ? ? ? ? @ babel / plugin-proposal-logic-assignment-operators,（如出現(xiàn)短路時(shí)的邏輯處理插件）

?? ? ? ? ? ? ? [''@babel/plugin-proposal-optional-chaining'',{loose:false}],(可選鏈優(yōu)化? 深層嵌套優(yōu)化處理插件)? ? ? ? ? ? ? ?

?? ? ? ? ? ? ? [''@babel/plugin-proposal-pipeline-operator'',{proposal:'minimal’}],(解析管道運(yùn)算符)

?? ? ? ? ? ? ? ['@babel/plugin-proposal-nullish-coalescing-operator'',{loose：false}]帖族，（刪除無效的合并運(yùn)算符）

? ? ? @ babel / plugin-proposal-do-expressions,(插件執(zhí)行一個(gè)do｛多個(gè)條件語(yǔ)句｝表達(dá)式栈源，最終語(yǔ)句完成值是該do表達(dá)式的完成值)

? ? ? @ babel / plugin-transform-spread，（擴(kuò)展運(yùn)算符轉(zhuǎn)換插件）

? ? ? ["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }],(轉(zhuǎn)擴(kuò)展運(yùn)算插件)

? ? ? ["@babel/plugin-transform-object-assign”]，（插件支持Object.assign()）

? ? ［“import”，｛libraryName: 'antd',libraryDirectory: 'es',style: true,｝］（and按需引入設(shè)置）

} }})

? ? ? ? package.json

?? ? ? ? ? 項(xiàng)目打包／啟動(dòng)相關(guān)插件

? ? ? ? ? ? ? webpack－dev－server

? ? ? ? ? ? ? webpack－cli

? ? ? ? ? ? ? webpack－merga

? ? ? cross-env? (插件解決window系統(tǒng)兼容問題)

? ? ? ? postcss.config.js

? ? ? ? ? ? 可以做相關(guān)的瀏覽器版本兼容配置

? ? ? ? ? ? 相關(guān)插件

?? ? ? ? ? ? ? autoprefixer（｛prefer：false驮肉，plugin：loader=>[request(autoprefixer)({browsers:[‘ie’>=9,’Safari’>=6]})]｝｝）

? ? ? public文件

? ? ? ? 一些公用文件存放

? ? ? dist文件（打包后的文件）

? ? ? src文件（項(xiàng)目主文件）

? ? ? ? assets文件（存放圖片等資源）

? ? ? ? api相關(guān)文件（api接口處理文件）

? ? ? ? modules文件或者pages文件

? ? ? （store文件）

? ? ? ? utils文件

? ? ? ? ? request.js（axios攔截文件）

?? ? ? ? ? ? （相關(guān)插件）axios、history（使用：引入createBrowserHistory（現(xiàn)代瀏覽器使用）艰亮、createMemoryHistory（手機(jī)端使用））createBrowserHistory（｛basename：‘基鏈接（環(huán)境域名）’，forceRefresh：true? ／是否強(qiáng)制刷新整個(gè)頁(yè)面｝）

? ? ? ? ? ? ? ? axios.defaults.withCredentials = true;? //設(shè)置cross跨域并設(shè)置訪問權(quán)限允許跨域攜帶cookie信息

? ? ? ? ? ? ? ? 攔截設(shè)置：

? axios.interceptors.request.use(function?(config)?{returnconfig;（請(qǐng)求參數(shù)攔截處理挣郭，如：請(qǐng)求頭添加token或者其他（config.[‘headers’].token=......））},?function?(error)?{returnPromise.reject(error);});

?? ? ? ? ? ? ? ? ? axios.interceptors.response.use(function?(response)?{returnresponse;(請(qǐng)求成功返回參數(shù)錯(cuò)誤處理迄埃，如：返回不同狀態(tài)碼跳轉(zhuǎn)不同頁(yè)面，token失效重登錄......)},?function?(error)?{returnPromise.reject(error);（請(qǐng)求失敗錯(cuò)誤處理兑障，如：登錄失效侄非，跳轉(zhuǎn)重新登錄）});

? ? ? ? ? history.js（路由環(huán)境配置）

?? ? ? ? ? ? 配置原理（根據(jù)package.json文件里面配置的NODE_ENV==‘production’或者’development’加上webpack.config.js里面的Deserver.proxy設(shè)置的代理key來配置開發(fā)或者正式環(huán)境的url前綴蕉汪，配合createBrowserHistory.basename設(shè)置）

? ? ? ? ? until.js? ? （公用方法文件）

? ? ? ? index.js（全局引入，如：utils.request彩库、@babel/polyfill肤无、assets/.peg、路由前綴在路由上全局配置）

? ? ? ? routers.js? （路由文件）

? ? ? ? app.js（正經(jīng)的組建文件骇钦，設(shè)置頁(yè)面大致框架和路由跳轉(zhuǎn)設(shè)置宛渐，也能做一些全局設(shè)置）

? ? ? ? index.html（可以做全局引入三方資源）

————————————————————————————————————————

這里的webpack配置是根據(jù)webpack4.30版本配置，算不上目前最新版本眯搭，配置也比較繁瑣窥翩，里面用了happypack快速啟動(dòng)快速打包的多線程插件可能會(huì)跟你項(xiàng)目的一些配置方式出現(xiàn)沖突。