webpack设置不打包文件
一、需求要实现webpack打包后，一个全局配置文件不被打包。最终目的是我们可以在打包后的文件中修改这个文件（比如配置全局请求url前缀等等）。
要实现这个功能需要两步操作。
1、 复制不打包文件
2、 引入文件
二、复制文件
这里的复制文件指将无需打包的文件复制至打包后的静态文件
三、引入文件
在html中引入不打包的配置文件，一般不打包文件都放在根目录下的static文件夹中，打包后放在dist文件夹。在html文件中使用script标签引用即可。
注意
不要使用require或者import的方式引入文件，否则该文件就会参与打包，从而使打包后修改配置的操作失效。
有什么问题欢迎留言~
END
绛旓細涓銆侀渶姹 瑕佸疄鐜皐ebpack鎵撳寘鍚庯紝涓涓叏灞閰嶇疆鏂囦欢涓嶈鎵撳寘銆鏈缁堢洰鐨勬槸鎴戜滑鍙互鍦ㄦ墦鍖呭悗鐨勬枃浠朵腑淇敼杩欎釜鏂囦欢锛堟瘮濡傞厤缃叏灞璇锋眰url鍓嶇紑绛夌瓑锛銆傝瀹炵幇杩欎釜鍔熻兘闇瑕佷袱姝ユ搷浣溿1銆 澶嶅埗涓嶆墦鍖呮枃浠 2銆 寮曞叆鏂囦欢 浜屻佸鍒舵枃浠 杩欓噷鐨勫鍒舵枃浠舵寚灏嗘棤闇鎵撳寘鐨勬枃浠跺鍒惰嚦鎵撳寘鍚庣殑闈欐佹枃浠 涓夈佸紩鍏ユ枃浠 鍦╤tml...
绛旓細閫氳繃閰嶇疆vue-cli鎶婁竴浜涘钩甯镐笉闇瑕佺敤鐨勫寘鎺掗櫎鍦鎵撳寘鏂囦欢涔嬪銆備緥濡:璁 webpack 涓嶆墦鍖 vue xlsx 鍜 element 鍏堟壘鍒 vue.config.js 锛 娣诲姞 externals 椤癸紝鍏蜂綋濡備笅锛氬啀娆¤繍琛屾墦鍖咃紝鎴戜滑浼氬彂鐜板寘鐨勫ぇ灏忓凡缁忓ぇ骞呭噺灏忥細 涓変釜鍖呭凡缁忎笉鍦ㄦ墦鍖呯殑鐩爣鏂囦欢涓簡銆 浣嗘槸鎴戜滑杩樿浣跨敤杩欎簺鍖咃紝鍙互...
绛旓細鎵撳寘涓涓鏂囦欢锛屽彧闇瑕佸父瑙勭殑鍦ㄥ叆鍙ｇ殑js鏂囦欢寮曠敤 css鏂囦欢鍗冲彲锛 鎵撳寘鎴愬涓狢SS鏂囦欢锛屽彲浠璁剧疆澶氫釜CSS鍏ュ彛锛岃webpack鐢 loader鍘绘墦鍖呫 鍜屽垎鍓插崟鐙墦鍖卝s鏂囦欢涓鏍枫備笅闈㈡湁涓や釜渚嬪瓙銆傘愪緥瀛愭潵婧愩// 浣跨敤webpack 鎵撳寘鍗曠嫭鐨刾ostcss璇硶鐨刢ss鏂囦欢 /* webpack.config.js */ var precss = require(...
绛旓細绗竴锛氫綘鍙互浣跨敤cdn 绗簩锛氫娇鐢webpack鐨別xternals
绛旓細webpack鍙細鐢熸垚涓涓彨鍋歜undle.js鐨鏂囦欢锛屾墍鏈夌殑璧勬簮鏂囦欢閮借鎵撳寘鍒颁簡杩欎釜鏂囦欢涓婏紝杩愯缃戠珯涔熶笉鏄洿鎺ヨ繍琛宧tml鐨勶紝瑕佺敤npm鏉ヨ繍琛
绛旓細鍓嶈█: 瀵逛簬闈為潤鎬佺殑鏂囦欢锛屽js锛屽綋webpack鎵撳寘鏃讹紝浼氳鐩存帴鎵撳埌妯″潡鏂囦欢涓紝濡俶ain.js锛屽鏋滀慨鏀逛簡锛岄渶瑕佸啀娆＄紪璇戣屽浜庨潤鎬佹枃浠讹紝濡俲pg锛宻vg绛夛紝鎴戜滑涓嶅笇鏈泈ebpack鍘绘墦鍖咃紝鍙渶瑕佸湪build瀹屽悗锛岀洿鎺ユ斁鍒癲ist涓嬬殑鏌愪釜璺緞涓嬪嵆鍙紝闅忔椂鍙互淇敼锛屽苟涓嶉渶瑕佸啀娆＄紪璇戦鍏堬紝鐪嬩竴娈靛緢鐔熸倝鐨webpack閰嶇疆{ test:...
绛旓細鍏朵腑build鏂囦欢澶涓殑 webpack.prod.conf.js 鏄垜浠富瑕佹敞鎰忕殑鏂囦欢,鎴戜滑鍦ㄨ鏂囦欢涓姩鎬璁剧疆涓闇瑕佽鎵撳寘鐨勬ā鍧楀苟鏋勫缓鍑哄悎閫傜殑閾炬帴銆傚湪webpack椤圭洰涓紝鎵寮曞叆鐨勭涓夋柟璧勬簮浼氳缁熶竴鎵撳寘杩泇ender鏂囦欢涓紝鎴戜滑閫氳繃webpack鐨 externals 灞炴у彲浠璁剧疆鎵撳寘鏃舵帓闄よ妯″潡锛岃鎯呰鏄庤 澶栭儴鎵╁睍(externals) 銆傚湪鍓嶉潰鐨...
绛旓細1. 妯″潡鎵撳寘鍜屼緷璧栫鐞嗭細Webpack鑳藉璇嗗埆椤圭洰涓墍鏈夌殑妯″潡渚濊禆鍏崇郴锛屽苟灏嗗畠浠墦鍖呮垚涓涓垨澶氫釜杈撳嚭鏂囦欢銆傝繖鎰忓懗鐫寮鍙戣呭彲浠ュ皢鍚勭妯″潡鏁村悎鍦ㄤ竴璧凤紝鏃犻渶鎷呭績娴忚鍣ㄥ涓嶅悓鏂囦欢绫诲瀷鐨勫姞杞藉拰澶勭悊闂銆傞氳繃杩欑鏂瑰紡锛學ebpack浼樺寲浜嗛」鐩殑缁撴瀯鍜屽姞杞介熷害銆2. 浠ｇ爜杞崲鍜屼紭鍖栵細闄や簡鍩烘湰鐨勬ā鍧楁墦鍖咃紝Webpack杩...
绛旓細2銆佸洜涓 webpack 鏄潤鎬佺紪璇戯紝闇瑕佸湪鎵撳寘鏃跺氨鎵弿鍒版墍鏈夊彲鑳界殑妯″潡锛屾墍浠ユ兂鐢 require(expression) 鍦ㄨ繍琛屾椂鑾峰彇妯″潡鐩墠骞朵笉鏀寔銆3銆佺敱浜 webpack 鏄负妯″潡鍖栬岀敓鐨勫伐鍏凤紝鎵浠ュ綋浣犲彧鎯冲鍒舵枃浠跺埌鍙︿竴涓鏂囦欢澶锛岄『渚垮鏂囦欢鍋氫竴浜涙枃鏈ˉ鍏呫佹浛鎹㈢瓑宸ヤ綔锛屼綘鐢 webpack 涓嶅悎閫傦紝鐢 gulp/grunt 鏇翠匠銆傝繖...
绛旓細build鏂囦欢澶涓殑webpack.prod.conf.js鏄垜浠殑涓绘枃浠讹紝鎴戜滑鍦ㄥ叾涓姩鎬璁剧疆涓闇瑕鎵撳寘鐨勬ā鍧楋紝骞舵瀯寤洪傚綋鐨勯摼鎺ャ傚湪webpack椤圭洰涓紝寮曞叆鐨勭涓夋柟璧勬簮灏嗚缁熶竴鎵撳寘鍒皏ender鏂囦欢涓傛垜浠彲浠ラ氳繃webpack鐨別xternals灞炴ц缃寘鎺掗櫎杩欎釜妯″潡銆傝鎯呰鍙傝澶栭儴鎵╁睍銆傚湪鍓嶉潰鐨勬楠や腑锛屾垜浠垱寤轰簡鍖呮嫭vue鍜寁ue-router鐨...
