webpack打包第三方类库
技术胖webpack教程webpack中使用echarts
在 webpack 的入口文件中直接引入第三方类库,向外全局暴露，以 jquery 插件使用为例
1.创建本地项目 webpack-demo
2.在 webpack-demo 的根目录下创建 package.json 文件
模块说明：
4.修改 package.json 文件的 scripts 属性值,进行打包资源的配置
5.安装相关的 loader
6.安装jquery
7.在入口文件 app.js 中引入 jquery
8.给按钮绑定事件
9.运行命令
10.结果展示
通过 webpack 的 ProvidePlugin 插件全局引入第三方类库,以 echats 使用为例
1 ~ 5步同上
6.安装echarts
7.在webpack.config.js中进行配置
7.创建echart容器
8.初始化echarts
9.运行命令
10.结果展示
绛旓細vendorchunk鏄敱webpack鎵撳寘鍑烘潵鐨勬枃浠讹紝chunk鏄寚webpack鍦ㄨ繘琛屾ā鍧楃殑渚濊禆鍒嗘瀽鐨勬椂鍊欙紝浠ｇ爜鍒嗗壊鍑烘潵鐨勪唬鐮佸潡銆俶odule鏄紑鍙戜腑鐨勫崟涓ā鍧椼傜紪杈戜唬鐮侊細[css]viewplaincopy p{ font-size:24px;padding:0100px;color:blue;} p:nth-of-type(2){ font-size:30px;text-align:center;color:black;font-...
绛旓細閬靛惊鐨勮鑼冧笉鍚屻俁equireJS 閬靛惊鐨勬槸 AMD锛堝紓姝ユā鍧楀畾涔夛級瑙勮寖锛孲eaJS 閬靛惊鐨勬槸 CMD 锛堥氱敤妯″潡瀹氫箟锛夎鑼冦傝鑼冪殑涓嶅悓锛屽鑷翠簡涓よ API 鐨勪笉鍚屻係eaJS 鏇寸畝娲佷紭闆咃紝鏇磋创杩 CommonJS Modules/1.1 鍜 Node Modules 瑙勮寖銆傜ぞ鍖虹悊蹇垫湁宸紓銆俁equireJS 鍦ㄥ皾璇曡绗笁鏂圭被搴淇敼鑷韩鏉ユ敮鎸 RequireJS锛岀洰鍓...
绛旓細鍦ㄩ」鐩腑浣跨敤浜 requirejs 鏉ユ寜闇鍔犺浇鑴氭湰銆 requirejs 涓畾涔変簡 require 鏂规硶锛屼絾鏄憿锛屽紩鐢ㄧ殑绗笁鏂圭被搴涓篃鏈夎皟鐢╮equire 鏂规硶锛屼簬鏄氨鎶ラ敊浜嗭細require.js:168 Uncaught Error: Mismatched anonymous define() module:function (__WEBPACK_EXTERNAL_MODULE_1__) { ...
绛旓細涓夈佸垵鎺 webpack 3.1 浣跨敤babel鎵撳寘es6 3.1.1 缂栬瘧 ES 6/7 Babel Babel Presets Babel Polyfill Babel Runtime Transform 渚嬪瓙 3.2 鎵撳寘 Typescript 閰嶇疆 tsconfig Typings 渚嬪瓙 3.3 鎻愬彇 js 鐨勫叕鐢ㄤ唬鐮 渚嬪瓙 image.png 3.4 浠ｇ爜鍒嗗壊鍜屾噿鍔犺浇 绗竴绉嶆柟寮忥細閫氳繃wepack鍐呯疆鏂规硶 绗簩绉嶆柟寮忥細...
绛旓細babel-plugin-dynamic-import-node 鎻掍欢鏄娇 import() 鏇挎崲鎴 require 缂栬瘧 淇敼 .babelrc 鏂囦欢 娉ㄦ剰 锛氫娇鐢ㄦ彃浠 build 鍚庢病鏈 chunk files 鏂囦欢銆傞氳繃 DllPlugin 鎻掍欢鍒嗙鍑绗笁鏂鍖 浣跨敤 add-asset-html-webpack-plugin 鍔ㄦ佹坊鍔 dll.js 鍒 html 銆傞渶瑕佹敞鎰 椤圭洰缁忚繃浠ヤ笂浼樺寲锛鎵撳寘浠 30 鍒嗛挓锛屽埌...
绛旓細1.涓嬭浇optimize-css-assets-webpack-plugin鎻掍欢 2.寮曠敤璇ユ彃浠 3.浣跨敤璇ユ彃浠 3.5 js璇硶妫鏌slint/js鍏煎鎬у鐞/js鍘嬬缉 3.5.1 js璇硶妫鏌slint 1.涓嬭浇eslint-loader鍜宔slint 2.鍦╬ackage.json涓殑eslintConfig涓繘琛岄厤缃 3.閰嶇疆eslint-loader锛屽叾涓彧闇妫娴媕s鏂囦欢骞惰鎺掗櫎绗笁鏂搴擄紝鍙娴嬭嚜宸...
绛旓細webpack: 鍒嗘瀽渚濊禆=> 缂栬瘧鎵撳寘=> 浜ょ粰鏈湴鏈嶅姟鍣ㄨ繘琛屾覆鏌撱傞鍏堝垎鏋愬悇涓ā鍧椾箣闂寸殑渚濊禆锛岀劧鍚庤繘琛屾墦鍖咃紝鍦ㄥ惎鍔╳ebpack-dev-server锛岃姹傛湇鍔″櫒鏃讹紝鐩存帴鏄剧ず鎵撳寘缁撴灉銆webpack鎵撳寘涔嬪悗瀛樺湪鐨勯棶棰橈細闅忕潃妯″潡鐨勫澶氾紝浼氶犳垚鎵撳嚭鐨 bundle 浣撶Н杩囧ぇ锛岃繘鑰屼細閫犳垚鐑洿鏂伴熷害鏄庢樉鎷栨參銆倂ite: 鍚姩鏈嶅姟鍣=> 璇锋眰...
绛旓細鍏朵腑build鏂囦欢澶逛腑鐨 webpack.prod.conf.js 鏄垜浠富瑕佹敞鎰忕殑鏂囦欢,鎴戜滑鍦ㄨ鏂囦欢涓姩鎬佽缃笉闇瑕佽鎵撳寘鐨勬ā鍧楀苟鏋勫缓鍑哄悎閫傜殑閾炬帴銆傚湪webpack椤圭洰涓紝鎵寮曞叆鐨绗笁鏂璧勬簮浼氳缁熶竴鎵撳寘杩泇ender鏂囦欢涓紝鎴戜滑閫氳繃webpack鐨 externals 灞炴у彲浠ヨ缃墦鍖呮椂鎺掗櫎璇ユā鍧楋紝璇︽儏璇存槑瑙 澶栭儴鎵╁睍(externals) 銆傚湪鍓嶉潰鐨...
绛旓細npm install闃呰涓嬮潰鐨勫唴瀹逛箣鍓嶆垜寮虹儓寤鸿浣犵湅涓嬫垜涔嬪墠鐨勬枃绔:娣卞叆鐞嗚В webpack 鏂囦欢鎵撳寘鏈哄埗,鐞嗚В webpack 鏂囦欢鐨勬墦鍖呯殑鏈哄埗鏈夊姪浜庝綘鏇村ソ鍦板疄鐜版寔涔呭寲缂撳瓨銆備緥瀛愬ぇ姒傛槸杩欐牱鎻忚堪鐨:瀹冪敱涓や釜椤甸潰缁勬垚 pageA 鍜 pageB// src/pageA.jsimport componentA from './common/componentA';// 浣跨敤鍒 jquery 绗笁鏂搴,...
绛旓細椤圭洰寮鍙戜腑锛屼娇鐢ㄤ簡寰堝渚濊禆鍖咃紝濡 Vue 銆佽矾鐢辩鐞 Vue-router 銆佺姸鎬佺鐞 Vuex 銆乁I缁勪欢搴( ElementUI 銆 Vant )銆佸浘琛紙 echarts 锛夌瓑銆鎵撳寘鏋勫缓锛屽彂鐜版湁涓浜涘寘浣撶Н杩囧ぇ锛屼細褰卞搷棣栭〉鍔犺浇閫熷害銆傚涓嬫墍绀猴細浠庝笂鍥剧殑鍒嗘瀽鍖呬腑锛屽彲浠ュ皢浠ヤ笅鎻掍欢鎶界锛氶渶瑕佸垹闄ょ殑渚濊禆鍖 VueCLI3鑷甫浜 webpack analzer ...
