新建项目
项目脚手架搭建 react
相关文件
webpack.config.js
使用相关插件
path
html-webpack-plugin
html文件处理插件
clean-webpack-plugin
清除上次打包文件插件
copy-webpcak-plugin
打包时需要复制的相关文件的插件（比如一些报表文件模版）
speed-measure-webpack-plugin
速度测量插件 （const SpeedMeasurePlugin=require("speed-measure-webpack-plugin"); const smp=newSpeedMeasurePlugin(); const webpackConfig=smp.wrap({}）
happypack
一些loader进程管理
打包配置
{
mode:’环境设置’，
entry：‘入口文件设置’，
output：｛path：path.resovle(__dirname,’dist’),filename:’main_[hash].js’,publicPath:’根据环境设置url前缀（接口域名代理字符）’｝，
models：｛rules：［
说明：｛
test：‘正则匹配／.js／’
exclude：‘排除。。。（可以设置后缀名或者文件路径）’
include：‘包含。。。（可以设置后缀名或者文件路径）’
loader：‘loader设置url－loader’或者use：［loader：‘ ’，oprios：｛plugins：［插件设置］或者其他设置｝］（use［可以设置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’］｝，（在导入没有带后缀名的文件时，尝试在文件加入上面后缀名访问）
plugins：［］ （插件配置）
}
bable.config.js
相关插件 (用法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 }],(类装饰器 旧：设置legacy时需要loose支持，有顺序)
@babel/plugin-proposal-dynamic-import,（import处理插件）
@bacel/plugin-transform-runtime，（将helper和polypill都改为从一个统一的地方引入，引入的对象和全局变量完全隔离）
["@babel/plugin-proposal-class-properties", { "loose" : true }],(解析类的属性)
@ babel / plugin-proposal-logic-assignment-operators,（如出现短路时的逻辑处理插件）
[''@babel/plugin-proposal-optional-chaining'',{loose:false}],(可选链优化 深层嵌套优化处理插件)
[''@babel/plugin-proposal-pipeline-operator'',{proposal:'minimal’}],(解析管道运算符)
['@babel/plugin-proposal-nullish-coalescing-operator'',{loose：false}]，（删除无效的合并运算符）
@ babel / plugin-proposal-do-expressions,(插件执行一个do｛多个条件语句｝表达式，最终语句完成值是该do表达式的完成值)
@ babel / plugin-transform-spread，（扩展运算符转换插件）
["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }],(转扩展运算插件)
["@babel/plugin-transform-object-assign”]，（插件支持Object.assign()）
［“import”，｛libraryName: 'antd',libraryDirectory: 'es',style: true,｝］（and按需引入设置）
} }})
package.json
项目打包／启动相关插件
webpack－dev－server
webpack－cli
webpack－merga
cross-env (插件解决window系统兼容问题)
postcss.config.js
可以做相关的浏览器版本兼容配置
相关插件
autoprefixer（｛prefer：false，plugin：loader=>[request(autoprefixer)({browsers:[‘ie’>=9,’Safari’>=6]})]｝｝）
public文件
一些公用文件存放
dist文件（打包后的文件）
src文件（项目主文件）
assets文件（存放图片等资源）
api相关文件（api接口处理文件）
modules文件或者pages文件
（store文件）
utils文件
request.js（axios拦截文件）
（相关插件）axios、history（使用：引入createBrowserHistory（现代浏览器使用）、createMemoryHistory（手机端使用））createBrowserHistory（｛basename：‘基链接（环境域名）’，forceRefresh：true ／是否强制刷新整个页面｝）
axios.defaults.withCredentials = true; //设置cross跨域并设置访问权限允许跨域携带cookie信息
拦截设置：
axios.interceptors.request.use(function (config) {returnconfig;（请求参数拦截处理，如：请求头添加token或者其他（config.[‘headers’].token=......））}, function (error) {returnPromise.reject(error);});
axios.interceptors.response.use(function (response) {returnresponse;(请求成功返回参数错误处理，如：返回不同状态码跳转不同页面，token失效重登录......)}, function (error) {returnPromise.reject(error);（请求失败错误处理，如：登录失效，跳转重新登录）});
history.js（路由环境配置）
配置原理（根据package.json文件里面配置的NODE_ENV==‘production’或者’development’加上webpack.config.js里面的Deserver.proxy设置的代理key来配置开发或者正式环境的url前缀，配合createBrowserHistory.basename设置）
until.js （公用方法文件）
index.js（全局引入，如：utils.request、@babel/polyfill、assets/.peg、路由前缀在路由上全局配置）
routers.js （路由文件）
app.js（正经的组建文件，设置页面大致框架和路由跳转设置，也能做一些全局设置）
index.html（可以做全局引入三方资源）
————————————————————————————————————————
这里的webpack配置是根据webpack4.30版本配置，算不上目前最新版本，配置也比较繁琐，里面用了happypack快速启动快速打包的多线程插件可能会跟你项目的一些配置方式出现冲突。