webpack打包Js文件
a .
注意点:index.js就是需要打包的文件打包之后的文件会放到dist目录中, 名称叫做main.js
b .
这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中
其实在webpack指令中除了可以通过命令行的方式告诉webpack需要打包哪个文件以外,
还可以通过配置文件的方式告诉webpack需要打包哪个文件
这句指令的含义是将webpack将index.js和他依赖的模块打包到一个文件中
其实webpack打包指令除了可以通知要打包哪些文件，还可以通过配置
2.2webpack常见配置
刚才是输入npx webpack index.js 那么现在就可以输入npx webpack了
如果想要使用其他指令，可以直接修改的 package.json 的scirpts
以后再打包的时候，就可以直接使用npm run test了；
当然，还可以看下devtool的取值，他生成的sourcemap映射表，对打包后的包的大小和打包速度有很大影响
绛旓細```杩欓噷鍒嗗埆鎶 浣跨敤鐨 react , react-dom , jquery , react-router , 绗笁鏂瑰簱鎻愪簡鍑烘潵鍗曠嫭鐢熸垚鏂囦欢vendor.js 棣栧厛瀹夎渚濊禆: extract-text-webpack-plugin ,涔嬪悗鍦╳ebpack涓繘琛岄厤缃 娉ㄦ剰: ** 渚嬪瓙涓厤缃腑 {publicPath: './'} 涓嶆槸蹇呭～椤, 鎴戣繖閲屾槸涓轰簡瑙ｅ喅鑳屾櫙鍥剧墖鎵撳寘鎴栬矾寰勪笉姝ｇ‘...
绛旓細Webpack 鎵撳寘鍦ㄥ懡浠よ鎵ц webpack index.js bundle.js 瀵瑰叆鍙鏂囦欢杩涜鎵撳寘锛岀敓鎴 bundle.js 锛屽ぇ浣撶粨鏋勪负锛堜负浜嗘柟渚块槄璇伙紝鎴戝垹闄や簡閮ㄥ垎澶氫綑鐨勪唬鐮侊級锛氬彲浠ョ湅鍒帮紝鏈缁堢敓鎴愮殑鏂囦欢浠 (function (modules) {})([妯″潡1, 妯″潡2]) 鐨勬柟寮忓惎鍔紝鎴戜滑瀹氫箟鐨勬ā鍧楄鍖呰鎴愪竴涓釜鍖垮悕鍑芥暟锛岀劧鍚庝互鏁扮粍鐨勫舰寮忎紶閫...
绛旓細濡傛灉鏄櫘閫氱殑js鏂囦欢锛屼笉闇瑕佹ā鍧楀寲锛屼篃娌℃湁鐗瑰埆鐨勫鐞嗭紝鍙互涓嶇敤webpack銆傜畝鍗曠殑html閮戒笉闇瑕亀ebpack锛屼娇鐢╳ebpack鍙嶈屾樉寰楃箒鐞愩
绛旓細鎵撳寘鏄惁鎶ラ敊浜嗭紝鎸夌悊璇存墦鍖呭悗鍙槸涓涓帇缂╂枃浠讹紝鍙互鐩存帴鐢╥ndex.html鎵撳紑鎵杩炴帴鐨js鏂囦欢
绛旓細鍦ㄤ娇鐢╲ue-cli鑴氭墜鏋鎵撳寘鍚庯紙UI鐢ㄧ殑Element-ui锛夛紝鍙戠幇vendor鏂囦欢寰堝ぇ锛屽皢杩1M宸﹀彸銆傚悗鏉ョ炕闃呰祫鏂欐墠鏄庣櫧锛屽師鏉webpack鎶婃墍鏈夌殑搴撻兘鎵撳寘鍒颁簡涓璧凤紝瀵艰嚧鏂囦欢寰堝ぇ銆傛垜鐨勮В鍐冲姙娉曪細 1銆佹妸涓嶅父鏀瑰彉鐨勫簱鏀惧埌index.html涓紝閫氳繃cdn寮曞叆锛屾瘮濡備笅闈㈣繖鏍凤細鐒跺悗鎵惧埌build/webpack.base.conf.js鏂囦欢锛屽湪 module....
绛旓細entry鐢ㄦ潵鎸囧畾Webpack鐨勬墦鍖呭叆鍙ｃ傝繖涓渶瑕佷粠Webpack鎵撳寘鏈哄埗涓婅鏄庯紝澶у閮界煡閬擄紝Webpack鐨勬墦鍖呯殑鏍稿績鍘熺悊锛氫竴鍒囩殕妯″潡銆傝屽埌搴曟墦鍖呴偅浜涗笢瑗匡紝杩欎簺涓滆タ涔嬮棿鐨勪緷璧栧叧绯绘槸浠涔堟牱鐨勶紝閮芥簮浜庢ā鍧椾緷璧栧浘涓殑渚濊禆鏍戯紝鑰岃繖涓爲鐨勬牴鑺傜偣灏辨槸杩欎釜entry銆備笂鍥句腑鍏ュ彛灏辨槸宸︿笂瑙掔殑.js鏂囦欢銆傝繖閮ㄥ垎璇︾粏鍙互鍙傝僕ebpack...
绛旓細鍙互锛鎵撳寘鍙槸鍘嬬缉娣锋穯
绛旓細require('../js/zepto.min.js');let a = 'world';let hello = `hello ${a}`;console.log(hello);鍙互鐪嬪埌css鎴戜滑閮介氳繃require鐨勬柟寮忓紩杩涙潵锛岃繖鏍webpack浼氭妸css鍜js鎵撳寘杩涗竴涓枃浠躲9.鎴戜滑杩樺樊涓猧ndex.html锛屾斁鍦ㄩ」鐩鏂囦欢澶涓嬪氨鍙互锛屾甯稿啓锛屽紩鍏uild/app.js灏卞彲浠ュ暒锛10.璁╂垜浠瘯璇曞惂...
绛旓細绗竴锛氫綘鍙互浣跨敤cdn 绗簩锛氫娇鐢webpack鐨別xternals
绛旓細杩欐槸鎵嬪ご鐨勪竴涓」鐩紝鍚屾牱鐨勬簮鐮侊紝鍚屾牱鐨勬湇鍔″櫒锛屾墦寮浜咲isablecache锛岀洰鍓嶅畬鍏ㄥ姞杞芥槸6.82绉掍紭鍖栧悗锛屽姞杞芥椂闂存墠2.59绉掞紝鎻愬崌浜60%鐨勫姞杞藉叾瀹炲嚭鍙戠偣杩樻槸姣旇緝濂界悊瑙ｇ殑锛屽帇缂js鍜屼娇鐢–DN鍥犱负鎴戣繖杈圭敤鐨凩inux鏈嶅姟鍣紝鐒跺悗瀹夎鐨勫疂濉旓紝浣跨敤鐨凬ginx锛岄粯璁ゆ槸寮鍚簡Gzip锛屾墍浠ユ垜浠彲浠ュ厛瀹夎compression-webpack-...
