webpack简单配置，路由配置，接口拦截配置，基本文件配置
新建项目项目脚手架搭建 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 = new SpeedMeasurePlugin(); 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) { return config;（请求参数拦截处理，如：请求头添加token或者其他（config.[‘headers’].token=......））}, function (error) { return Promise.reject(error);});
axios.interceptors.response.use(function (response) { return response;(请求成功返回参数错误处理，如：返回不同状态码跳转不同页面，token失效重登录......)}, function (error) { return Promise.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快速启动快速打包的多线程插件可能会跟你项目的一些配置方式出现冲突。
绛旓細閰嶇疆鍘熺悊(鏍规嵁package.json鏂囦欢閲岄潰閰嶇疆鐨凬ODE_ENV==鈥榩roduction鈥欐垨鑰呪檇evelopment鈥欏姞涓webpack.config.js閲岄潰鐨凞eserver.proxy璁剧疆鐨勪唬鐞唊ey鏉ラ厤缃紑鍙戞垨鑰呮寮忕幆澧冪殑url鍓嶇紑,閰嶅悎createBrowserHistory.basename璁剧疆) until.js (鍏敤鏂规硶鏂囦欢) index.js(鍏ㄥ眬寮曞叆,濡:utils.request銆丂babel/polyfill銆乤ssets/.peg銆璺敱...
绛旓細webpackConfig.plugins.push(plugin);})璺敱閰嶇疆 鍦ㄥ椤靛簲鐢ㄤ笅锛屾垜浠笇鏈涜闂殑鏄痩ocalhost:8080/a锛岃屼笉鏄痩ocalhost:8080/a.html銆傜敱浜巜ebpack-dev-server鍙槸灏嗘枃浠舵墦鍖呭湪鍐呭瓨閲岋紝鎵浠ヤ綘娌℃硶鍦╡xpress閲岀洿鎺endfile('output/views/a.html')锛屽洜涓鸿繖涓枃浠跺疄闄呬笂杩樹笉瀛樺湪銆傝繕濂絯ebpack鎻愪緵浜嗕竴涓猳utputF...
绛旓細涓昏鍖呮嫭璺敱鎳掑姞杞姐佽矾鐢卞墠缃鏌ャ佸悎娉曟ф牎楠岄昏緫,浠ヤ笅鏄垜鍐欑殑涓涓绠鍗曡矾鐢import Vue from 'vue';import Router from 'vue-router';// 璺敱鎳掑姞杞絚onst getComponent = (name: string) => () => import(`./views/${name}.vue`);Vue.use(Router);const router = new Router({ routes: [ { path: ...
绛旓細1銆佸畨瑁卬ode锛寁ue杩愯闇瑕佸熀浜巒pm涓瀹氱殑鐗堟湰锛屾墍浠ラ鍏堝崌绾pm鍒版渶鏂扮殑鐗堟湰锛岃屽湪瀹夎鐨勮繃绋嬩腑涓汉姣旇緝鍠滄娣樺疂鐨勯暅鍍忥紝鎵浠ュ厛瀹夎cnpm锛堝洜涓洪熷害鍜岀ǔ瀹氭ч兘姣旇緝濂斤級2銆佸湪鐩爣鏂囦欢澶逛笅鎵撳紑缁堢 3銆佹墽琛宑npm install vue-cli -g 鍏ㄥ眬瀹夎 杩愯vue鏌ョ湅瀹夎鏄惁鎴愬姛 4銆佽繍琛寁ue init webpack(娉細妯℃澘鍚嶇О)...
绛旓細浣犻渶瑕閰嶇疆 Webpack(娣诲姞 loader):// webpack.config.js module.exports = { entry: './main.js',output: { path: './build', // 鍥剧墖鍜 JS 浼氬埌杩欓噷鏉 publicPath: 'http://mycdn.com/', // 杩欎釜鐢ㄦ潵鎴愭垚姣斿鍥剧墖鐨 URL filename: 'bundle.js'},module: { loaders: [{ test: ...
绛旓細浠栦滑涓嶆槸涓嶇浉鍏崇殑涓や釜涓滆タ锛屼篃灏辨槸璇翠笉鏄繀椤讳竴璧蜂娇鐢ㄧ殑锛寃ebpack鍙槸鎻愪緵浣滀负涓涓伐鍏凤紝vue鐨璺敱妯″潡鍦ㄥ墠绔殑鍒╃敤璺緞鍔犺浇瀵瑰簲缁勪欢瑙嗗浘鐨勫姛鑳姐傚彟澶栨墦涓獁ebpack鏈浣冲疄璺电殑灏廳emo锛//github.com/chen2009277025/webpack-ant-design-demo
绛旓細锛1锛: gulp + webpack 鏋勫缓鎵撳寘宸ュ叿锛 浣跨敤浜嗕竴绯诲垪鐨刲oader锛屾瘮濡傦細vue-loader, sass-loader, babel-loader , 浠ュ強 postcss锛宲ostcss-custom-properties锛岀瓑绛 [2] : postcss-custom-properties : 鐢ㄦ潵鍋氭牱寮忓叏灞鍖, 鍙渶瑕侀氳繃鍙橀噺鍘荤淮鎶わ紝閫氳繃缂栬瘧鍙橀噺鏃㈠彲浠ユ崲鑲ゃ俒3] : vue-loader...
绛旓細浣跨敤`require.ensure`鏃堕渶瑕佹敞鎰忥紝瀹冧富瑕佺敤浜庨珮绾閰嶇疆鍜屾ц兘浼樺寲鍦烘櫙銆傚浜庡ぇ澶氭暟甯歌鐨勫紑鍙戝満鏅锛學ebpack鐨勫父瑙勫鍏ユ満鍒跺凡缁忚冻澶熶娇鐢ㄣ備絾鍦ㄩ渶瑕佽繘琛屼唬鐮佸垎鍓插拰鎳掑姞杞芥椂锛宍require.ensure`浼氭槸涓涓緢濂界殑閫夋嫨銆傚悓鏃讹紝闅忕潃Webpack鐗堟湰鐨勮凯浠ｆ洿鏂帮紝鏌愪簺鐗规у彲鑳戒細鏈夋墍鍙樺寲锛屽洜姝ゅ缓璁紑鍙戣呭湪浣跨敤鏃舵煡闃呮渶鏂扮殑瀹樻柟...
绛旓細閭ｄ箞鎺ヤ笅鏉ヨ鏉閰嶇疆 webpack:const path = require('path');const webpack = require('webpack');const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = { entry: { pageA: [path.resolve(__dirname, './src/pageA.js')], pageB: path.resolve(__dirname, './src/...
绛旓細1锛塧ssets锛氳祫婧愮洰褰曪紝鏀剧疆涓浜涘浘鐗囨垨鑰呭叕鍏眏s銆佸叕鍏眂ss銆傝繖閲岀殑璧勬簮浼氳webpack鏋勫缓锛2锛塩omponents锛氱粍浠剁洰褰曪紝鎴戜滑鍐欑殑缁勪欢灏辨斁鍦ㄨ繖涓洰褰曢噷闈紱3锛塺outer锛氬墠绔璺敱锛鎴戜滑闇瑕閰嶇疆鐨勮矾鐢辫矾寰勫啓鍦╥ndex.js閲岄潰锛4锛堿pp.vue锛氭牴缁勪欢锛5锛塵ain.js锛氬叆鍙s鏂囦欢锛5銆乻tatic锛氶潤鎬佽祫婧愮洰褰曪紝濡傚浘鐗囥佸瓧浣撶瓑銆
