<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

        vue-cli擴展多模塊打包的示例代碼

        來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 22:17:00
        文檔

        vue-cli擴展多模塊打包的示例代碼

        vue-cli擴展多模塊打包的示例代碼:場景 在實際的項目開發(fā)中會出現(xiàn)這樣的場景,項目中需要多個模塊(單頁或者多頁應(yīng)用)配合使用的情況,而vue-cli默認只提供了單入口打包,所以就想到對vue-cli進行擴展 實現(xiàn) 首先得知道webpack是提供了多入口打包,那就可以從這里開始改造 新建build/e
        推薦度:
        導(dǎo)讀vue-cli擴展多模塊打包的示例代碼:場景 在實際的項目開發(fā)中會出現(xiàn)這樣的場景,項目中需要多個模塊(單頁或者多頁應(yīng)用)配合使用的情況,而vue-cli默認只提供了單入口打包,所以就想到對vue-cli進行擴展 實現(xiàn) 首先得知道webpack是提供了多入口打包,那就可以從這里開始改造 新建build/e

        場景

        在實際的項目開發(fā)中會出現(xiàn)這樣的場景,項目中需要多個模塊(單頁或者多頁應(yīng)用)配合使用的情況,而vue-cli默認只提供了單入口打包,所以就想到對vue-cli進行擴展

        實現(xiàn)

        首先得知道webpack是提供了多入口打包,那就可以從這里開始改造

        新建build/entry.js

        const path = require('path')
        const fs = require('fs')
        const moduleDir = path.resolve(__dirname, '../src/modules')
        let entryObj = {}
        let moduleItems = fs.readdirSync(moduleDir)
        moduleItems.forEach(item => {
         entryObj[`${item}`] = `./src/modules/${item}/main.js`
        
        })
        
        module.exports = entryObj 

        這里用到了nodejs的fs和path模塊,可以查看文檔http://nodejs.cn/api/fs.html,http://nodejs.cn/api/path.html,可以根據(jù)自己的項目配置更改,此處是以src/modules/文件夾下的目錄作為模塊,每個模塊中都有一個main.js作為入口文件

        修改build/webpack.base.conf.js中entry

        const entryObj = require('./entry')
        
        module.exports = {
        
         entry: entryObj
        
        } 
        
        

        接下來就是如何將打包好的文件注入到html中,這里利用html-webpack-plugin插件來解決這個問題,首先你需要有一個html的模板文件,然后在webpack配置中更改默認的html-webpack-plugin插件配置

        添加build/plugins.js 

        const HtmlWebpackPlugin = require('html-webpack-plugin')
        let configPlugins = []
        Object.keys(entryObj).forEach(item => {
         configPlugins.push(new HtmlWebpackPlugin(
         {
        
         filename: '../dist/' + item + '.html',
        
         template: path.resolve(__dirname, '../index.html'),
        
         chunks: [item]
         }
         ))
        })
        module.exports = configPlugins 

        修改build/webpack.dev.conf.js配置 

        module.exports = {
         plugins: configPlugins
        } 
        

        實戰(zhàn)

        vue移動web通用腳手架

        github地址: https://github.com/GavinZhuLei/vue-mobile

        聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        vue-cli擴展多模塊打包的示例代碼

        vue-cli擴展多模塊打包的示例代碼:場景 在實際的項目開發(fā)中會出現(xiàn)這樣的場景,項目中需要多個模塊(單頁或者多頁應(yīng)用)配合使用的情況,而vue-cli默認只提供了單入口打包,所以就想到對vue-cli進行擴展 實現(xiàn) 首先得知道webpack是提供了多入口打包,那就可以從這里開始改造 新建build/e
        推薦度:
        標簽: 打包 例子 模塊
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲AV无码国产精品麻豆天美| 亚洲成av人在片观看| 亚洲国产精品一区| 97人妻精品全国免费视频| 亚洲乱码中文字幕综合| 任你躁在线精品免费| 亚洲成AV人片在线观看无 | 久久亚洲最大成人网4438| 久久久久久曰本AV免费免费| 中文字幕亚洲色图| av无码国产在线看免费网站| 99热在线日韩精品免费| 亚洲av午夜成人片精品网站| 青青青国产手机频在线免费观看 | 亚洲av无码不卡| 亚洲最大免费视频网| 亚洲精品国产日韩| 又粗又大又硬又爽的免费视频| 精品久久久久久无码免费| 成熟女人牲交片免费观看视频| 亚洲精品无码成人片久久不卡 | 日本黄色动图免费在线观看| 久久夜色精品国产噜噜噜亚洲AV | 国产精品免费一区二区三区四区| 亚洲成年轻人电影网站www| 午夜国产精品免费观看| 日韩精品亚洲专区在线影视| 黑人大战亚洲人精品一区| 在免费jizzjizz在线播| 中文字幕亚洲精品无码| 亚洲精品国产va在线观看蜜芽| 无码日韩精品一区二区免费暖暖 | 免费被黄网站在观看| 亚洲最大黄色网址| 日日夜夜精品免费视频| 在线播放免费人成毛片乱码| 亚洲国产美女精品久久| 国产福利电影一区二区三区,亚洲国模精品一区 | 国产啪精品视频网免费| 一级毛片免费视频网站| 亚洲福利电影一区二区?|