使用renren-fast快速開(kāi)發(fā)項(xiàng)目時(shí)
引入了vxe-table編輯表格的組件,但是在使用過(guò)程中闺属,對(duì)使用的組件原碼邏輯進(jìn)行了修改喇辽,如果上線本地修改的原碼他人無(wú)法更新到,于是通過(guò)webpack打包砰诵,靜態(tài)引入組件后綴為umd.js的主要文件征唬,達(dá)到效果實(shí)現(xiàn)。
-
1.首先找到該組件合成后的主要文件并將其放置在static的plugins中
微信圖片0.png
- 2.webpack.base.config.js
設(shè)置externals參數(shù)茁彭,引入外部庫(kù)总寒,無(wú)需webpack打包處理
externals:{
mockjs:'Mock',
echarts:'echarts',
ueditor:'UE',
'vxe-table':'VXETable', // 需要用的
'xe-utils':'XEUtils' // 需要用到的
}
-
在main.js中全局引入(css文件路徑不需要全局)
微信圖片1.png
-
-
在index.html文件中通過(guò)標(biāo)簽引入文件,將文件放置在正確的static靜態(tài)路徑下
圖片_.png
-
-
在config的init.js文件中,設(shè)置打包文件路徑(注意:引入文件路徑的先后順序)
微信圖片2.png
-
- 這樣將package.json文件中的dependencies打包配置中將其刪除
基本的操作已經(jīng)設(shè)置完成理肺,我們可以打包后將dist文件放置在tomcat中進(jìn)行測(cè)試摄闸!