webpack中如何加载静态文件的方法步骤
前言:
对于非静态的文件，如js，当webpack打包时，会被直接打到模块文件中，如main.js，如果修改了，需要再次编译
而对于静态文件，如jpg，svg等，我们不希望webpack去打包，只需要在build完后，直接放到dist下的某个路径下即可，随时可以修改，并不需要再次编译
首先，看一段很熟悉的webpack配置
{
test: [/\.jpg/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[ext]',
},
}
它表明，在解析jpg文件时，只需要提供一个url即可，bytes小于10000的转为base64。 此url为static/media/xxx.jpg。
注意：此处的url已经不是 项目文件夹结构的那个url(如src/assets/image/xxx.jpg), 而是 static/media/xxx.jpg，当编译后，dist/static/media中会出现 xxx.jpg
那么我们如何在组件中引入静态资源呢？
有两张方式:
1、在组件最上方，使用import导入
import b from "@/assets/image/a.jpg"
//此时 b 的值为 static/media/a.jpg
在组件中
<img src={b}/>
2、使用require导入
如果不在组件上方使用import导入，而是在组件中的任意位置使用时，可通过require引入
<img src={require("@/assets/image/a.jpg")}>
//此时require("@/assets/image/a.jpg")的值就是static/media/a.jpg
那么同理，如果想让markdown等其他文件，也成为静态资源。
第一步:
{
test: [/\.md/],
loader: require.resolve('url-loader'),
options: {
limit: 10, //可以设置小点
name: 'static/media/[name].[ext]',
},
}
第二步:
//md文件和jpg不同，我们需要的最终是md文件的内容，不是url
axios.get(require("@/assets/image/map.md")).then(res=>{
//res.data 就是内容
})
然后部署上去后，如果后期我们需要对map.md做修改，则直接修改static/media/map.md文件就行了，直接生效，不需要再次编译
绛旓細涓嶇劧鐨勮瘽锛webpack 鍦鍔犺浇 chunk 鐨勬椂鍊欙紝璺緞浼氬嚭閿欍傝缃紦瀛 寮濮嬭繖涓皬鑺備箣鍓嶏紝鍙互鍏堢湅涓嬪ぇ绁炵殑涓绡囨枃绔狅細澶у叕鍙閲屾庢牱寮鍙戝拰閮ㄧ讲鍓嶇浠ｇ爜銆傚浜闈欐鏂囦欢锛岀涓娆¤幏鍙栦箣鍚庯紝鏂囦欢鍐呭娌℃敼鍙樼殑璇濓紝娴忚鍣ㄧ洿鎺ヨ鍙栫紦瀛樻枃浠跺嵆鍙傞偅濡傛灉缂撳瓨璁剧疆杩囬暱锛屾枃浠惰鏇存柊鎬庝箞鍔炲憿锛熷棷锛屼互鏂囦欢鍐呭鐨 MD5 浣滀负鏂囦欢...
绛旓細鎴戞牴鎹偅涔︿竴姝ヤ竴姝ョ殑缁冧範瀹屼簡锛屼篃鐨勭‘澶ф浜嗚В浜唍ode.js锛屼笉杩囬噷闈㈠啓鐨勮矾鐢辩殑鍦版柟鎬绘劅瑙変笉鏂逛究锛屽崄涓鏀惧亣鏈鍚庝竴澶╋紝璇曠潃鍐欎簡涓畝鍗曠殑web鏈嶅姟鍣紝鐜板湪鍒嗕韩璁板綍浜庢锛乭ttp妯″潡宸叉彁渚涗簡鍩烘湰鍔熻兘锛屾墍浠ユ垜涓昏瑙ｅ喅涓や釜闂锛1鏄闈欐璧勬簮鐨勫鐞嗭紝2鏄姩鎬佽祫婧愮殑璺敱銆傞潤鎬佽祫婧愬湪node.js閲鐨勬剰鎬濇槸涓嶅彉鐨勶紝濡...
绛旓細鍦ㄥ墠娈甸」鐩紑鍙戜腑锛屾垜浠粡甯镐娇鐢╳ebpack杩涜椤圭洰鎼缓锛 涓昏浣滅敤鏈変袱涓紝鍒嗗埆鏄 鍦webpack涓浣跨敤cdn鏄湪鎵撳寘鐢熸垚闈欐璧勬簮鐨勬椂鍊欏仛澶勭悊锛屼富瑕佸師鐞嗘槸浣跨敤 html-webpack-plugin 鍔ㄦ佹彃鍏dn閾炬帴銆傚叧浜巜ebpack鐨勪娇鐢ㄨ繖閲屼笉鍋氳繃澶氱殑浠嬬粛锛屽皢浠ue--cli 2.x鐢熸垚鐨勯粯璁ら」鐩负渚嬪仛浠嬬粛 html-webpack-plugin 鏄...
绛旓細鐢ㄦ埛鍦ㄥ悗缁闂殑鏃跺,濡傛灉闇瑕佸啀娆¤姹傚悓鏍风殑闈欐璧勬簮,涓旈潤鎬佽祫婧愭病鏈夎繃鏈,閭ｄ箞娴忚鍣ㄥ彲浠ョ洿鎺ヨ蛋鏈湴缂撳瓨鑰屼笉鐢ㄥ啀閫氳繃缃戠粶璇锋眰璧勬簮銆倃ebpack 濡備綍鍋氭寔涔呭寲缂撳瓨涓婇潰绠鍗曚粙缁嶅畬鎸佷箙鍖栫紦瀛,涓嬮潰杩欎釜鎵嶆槸閲嶇偣,閭ｄ箞鎴戜滑搴旇濡備綍鍦 webpack 涓杩涜鎸佷箙鍖栫紦瀛樼殑鍛,鎴戜滑闇瑕佸仛鍒颁互涓嬩袱鐐:淇濊瘉hash 鍊肩殑鍞竴鎬,鍗充负姣忎釜鎵撳寘鍚...
绛旓細vue涓や釜闈欐js鑾峰彇淇℃伅鎿嶄綔濡備笅銆1銆侀厤缃産uild/webpack.dev.conf.js銆2銆佹柊寤篸b.json銆3銆侀氳繃localhost锛8081/api/getNewsList璁块棶銆4銆侀〉闈腑鑾峰彇鐨勬柟寮忋
绛旓細hash:8]. js锛屼細鐢熸垚鍏綅鐨刪ash瀛楃涓层2.濡傛灉鏄佷竴鐐圭殑椤圭洰锛webpack鏀归犻夯鐑︾殑璇濓紝鍙互姣忔鍙戝竷鐨勬椂鍊欐墜鍔ㄦ敼锛屾瘮濡傚湪html涓皢a. js鐨勫紩鍏ユ敼涓篴. js? 20210215锛岃繖鏍风殑鍚庤竟鍔犱竴涓粖澶╃殑鏃ユ湡锛屾祻瑙堝櫒灏变笉浼氫娇鐢ㄧ紦瀛橈紝浼氶噸鏂鍔犺浇鏂囦欢銆備釜浜虹粡楠岋紝浠ヤ緵鍙傝冿紝鏈夌敤閲囩撼锛屾湁闂杩界瓟銆
绛旓細鎵撳寘涓嶄粎浠呮槸绠鍗曞湴鎻掑叆鏂囦欢锛岃屾槸浠ｇ爜浼樺寲鐨勯噸瑕佹楠ゃ俢hunk灏卞儚闈欐浠ｇ爜锛岃屾噿鍔犺浇鍒欓伒寰寜闇鍔犺浇鐨勫師鍒欍Webpack鐨勬牳蹇冨湪浜巆hunk涓殑AST鏋勫缓锛岄厤缃枃浠跺寘鎷webpack.config.js鍜宲ackage.json锛屽悗鑰呭彲閫氳繃scripts鍔熻兘绠鍖栧懡浠ゆ墽琛屻備緷璧栦簬webpack-cli鐨刉ebpack锛屽畠钘忚韩浜巒ode_modules/bin锛岄氳繃鍛戒护琛屽伐鍏疯交鏉...
绛旓細鍏蜂綋妤间富杩樻槸鍙互鍘诲弬鑰冧笅 html-webpack-plugin 鐩稿叧璧勬枡,鐧惧害涓澶у爢灏变笉鍒楀嚭浜,涔熷彲浠ュ幓github涓婇潰鏌ョ湅 鐩镐俊妤间富鐪嬩簡涓婇潰鐨勯厤缃,鍜屾煡璇簡鐩稿叧璧勬枡鍚庤兘寰堝揩鐔熸倝鐨 鑰屼笖鎴戠殑html杩樻槸寰堝鍐欏ソ鐨闈欐缁撴瀯鐨勶紝涓嶆槸涓涓畝鍗曠殑html-webpack-plugin灏卞彲浠ョ敓鎴愩傞椤靛拰鏂囩珷椤甸潰鐨刵av涔熸槸鐩稿悓鐨勶紝鏈夋病鏈夌被浼糺sp鐨...
绛旓細閰嶇疆鍚庡湪鐩綍鏂板缓webpack.prod.config.js鐢熶骇鐜鐨勯厤缃枃浠讹紙璇ユ枃浠跺湪鍩烘湰閰嶇疆鏂囦欢鐨勫熀纭涓婃墿灞曪級閰嶇疆鎵撳寘渚濊禆鍚庡湪package.json鏂囦欢閲屽姞鍏uild鐨勫揩鎹疯剼鏈墦鍖 琛ュ厖璇存槑锛歟js鏄竴涓猨avascript妯℃澘搴擄紝鐢ㄦ潵浠巎son鏁版嵁涓敓鎴恏tml瀛楃涓诧紝甯哥敤浜巒ode.js npm run build 鎵撳寘鍚庣殑闈欐璧勬簮main.css/main.js/jpg锛...
绛旓細1銆佸鏋滄病鏈 babel锛 webpack 瀵 ES2015+ 鐨勮娉曟槸涓嶆帴鍙楃殑锛屼細鎻愮ず鐢ㄦ寚瀹 loader 杩欐剰鍛崇潃锛屽湪鏀寔閮ㄥ垎 ES2015 璇硶鐨 firefox 涓 chrome 娴忚鍣ㄤ腑鑳界洿鎺ヨ窇鐨勪唬鐮侊紝鏃犳硶鐢 webpack 缂栬瘧銆2銆佸洜涓 webpack 鏄闈欐缂栬瘧锛岄渶瑕佸湪鎵撳寘鏃跺氨鎵弿鍒版墍鏈夊彲鑳界殑妯″潡锛屾墍浠ユ兂鐢 require(expression) 鍦ㄨ繍琛屾椂...
