vue webpack多頁面構(gòu)建的實(shí)例代碼第2/3頁
更新時(shí)間：2018年09月11日 14:32:05 作者：ccyinghua
這篇文章主要介紹了vue webpack多頁面構(gòu)建的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
, //模板路徑
inject: true,
// excludeChunks 允許跳過某些chunks, 而chunks告訴插件要引用entry里面的哪幾個(gè)入口
// 如何更好的理解這塊呢？舉個(gè)例子：比如本demo中包含兩個(gè)模塊（index和about），最好的當(dāng)然是各個(gè)模塊引入自己所需的js，
// 而不是每個(gè)頁面都引入所有的js，你可以把下面這個(gè)excludeChunks去掉，然后npm run build，然后看編譯出來的index.html和about.html就知道了
// filter：將數(shù)據(jù)過濾，然后返回符合要求的數(shù)據(jù)，Object.keys是獲取JSON對象中的每個(gè)key
excludeChunks: Object.keys(pages).filter(item => {
return (item != page)
})
}
// 需要生成幾個(gè)html文件，就配置幾個(gè)HtmlWebpackPlugin對象
devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}
(4) 修改build/webpack.prod.conf.js
刪除文件內(nèi)原有的HtmlWebpackPlugin相關(guān)內(nèi)容
...
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
...
在文件最后添加
var pages = utils.getEntries('./src/entry/*/*.html')
for(var page in pages) {
// 配置生成的html文件，定義路徑等
var conf = {
filename: page + '.html',
template: pages
相關(guān)文章
Vue輪播圖組件的封裝可通過封裝組件、使用插件、配置化等方式實(shí)現(xiàn)，主要包括圖片預(yù)加載、定時(shí)輪播、無限滾動(dòng)、手勢滑動(dòng)、響應(yīng)式布局等功能，實(shí)現(xiàn)方式可使用Vue的生命周期函數(shù)、自定義事件、計(jì)算屬性等技術(shù)2023-04-04
這篇文章主要介紹了淺談vue加載優(yōu)化策略，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
關(guān)于Vue實(shí)現(xiàn)組件信息的緩存問題
這篇文章主要介紹了關(guān)于Vue實(shí)現(xiàn)組件信息的緩存問題的相關(guān)資料,需要的朋友可以參考下2017-08-08
解決vue 使用axios.all()方法發(fā)起多個(gè)請求控制臺報(bào)錯(cuò)的問題
這篇文章主要介紹了解決vue 使用axios.all()方法發(fā)起多個(gè)請求控制臺報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue中字符串如何拼接路由path路徑方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue中el-input綁定鍵盤按鍵(按鍵修飾符)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue?響應(yīng)式系統(tǒng)依賴收集過程原理解析
Vue 初始化時(shí)就會通過 Object.defineProperty 攔截屬性的 getter 和 setter ，為對象的每個(gè)值創(chuàng)建一個(gè) dep 并用 Dep.addSub() 來存儲該屬性值的 watcher 列表，這篇文章主要介紹了Vue?響應(yīng)式系統(tǒng)依賴收集過程分析,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue如何使用混合Mixins和插件開發(fā)詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue+element-ui表格自定義列模版的實(shí)現(xiàn)
本文主要介紹了vue+element-ui表格自定義列模版的實(shí)現(xiàn),通過插槽完美解決了element-ui表格自定義列模版的問題,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
vue中使用vue-router切換頁面時(shí)滾動(dòng)條自動(dòng)滾動(dòng)到頂部的方法
這篇文章主要介紹了vue項(xiàng)目中在使用vue-router切換頁面的時(shí)候滾動(dòng)條自動(dòng)滾動(dòng)到頂部的實(shí)現(xiàn)方法，一般使用Window scrollTo() 方法實(shí)現(xiàn)，本文給大家簡單介紹了crollTop的使用,需要的朋友可以參考下2017-11-11