webpack多頁面開發(fā)實(shí)踐
寫在前面
webpack是一款模塊加載器兼打包工具,能把js,css,頁面,圖片,視頻等各種資源,進(jìn)行模塊化處理。而現(xiàn)在網(wǎng)上流傳很多單頁面的webpack模型,那多頁面呢?比較少,現(xiàn)在我提供一個(gè)多頁面的前端模型。希望大家適合使用。
在最開始接觸webpack的時(shí)候,我都覺得webpack只適用于單頁面應(yīng)用,比如webpack+react,webpack+vue。我自己在使用webpack+vue構(gòu)建項(xiàng)目及開發(fā)的過程中感受到了webpack的強(qiáng)大和方便?;趯?shí)際項(xiàng)目需求,我在想,多頁面站點(diǎn)是否也能使用webapck來構(gòu)建呢?于是就開始了一番探索,最終算是搭建了一套比較完整的解決方案。
本文以一個(gè)實(shí)際項(xiàng)目為例子,講述在多頁面項(xiàng)目中如何使用webpack進(jìn)行工程化構(gòu)建。本文是自己的實(shí)踐經(jīng)驗(yàn)總結(jié),所以有些解決方案并不是最優(yōu)的,仍在探索優(yōu)化中,如果有什么錯(cuò)誤紕漏,歡迎指出。
簡(jiǎn)介
本項(xiàng)目主要基于webpack2.x構(gòu)建,以gulp作為輔助工具。前端使用art-template作為模板引擎,一個(gè)頁面對(duì)應(yīng)一個(gè)模板文件和一個(gè)入口文件,入口文件中可以通過import或require引入其他模塊,這些模塊webpack會(huì)自動(dòng)跟入口文件合并為一個(gè)文件。
前端開發(fā)環(huán)境搭建
主要目錄結(jié)構(gòu)
├─dist #打包后生成的文件目錄 └─src #開發(fā)目錄 ├─components #通用組件 ├─static #靜態(tài)資源目錄 │ ├─css │ ├─img │ └─js │ ├─component #站點(diǎn)通用組件對(duì)應(yīng)的js │ ├─lib #第三方j(luò)s庫 │ ├─services #各頁面入口 │ └─util #通用工具js ├─template #html模板 └─views #頁面 main.js #公共入口 gulpfile.js #gulp任務(wù)配置 package.json #項(xiàng)目依賴 webpack.config.js #webpack配置
webpack配置
入口文件
// 獲取入口文件 var entries = (function() { var jsDir = path.resolve(__dirname, 'src/static/js/services'); var entryFiles = glob.sync(jsDir + '/*.js'); var map = {}; entryFiles.forEach(function(filePath) { var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')); map[filename] = filePath; }); return map; })();
該方法將生成文件名到文件絕對(duì)路徑的map, 比如
entry: { 'page-1': '/../webpack-multipage-demo/src/static/js/services/page-1.js' }
熱更新
熱更新簡(jiǎn)直不要太好用,極大地提高了開發(fā)效率。
//服務(wù)器配置 var devServer = env === 'production' ? {} : { contentBase: path.resolve(__dirname), compress: true, historyApiFallback: true, hot: true, inline: true, host: 'localhost', port: 8080 };
另外,在plugin中加入new webpack.HotModuleReplacementPlugin(),開啟Hot Module Replacemen,即可實(shí)現(xiàn)熱更新。
生成html配置
約定同一頁面的js文件與模板文件命名一致,最終根據(jù)該js生成與其同名的html文件。
var htmlPages = (function() { var artDir = path.resolve(__dirname, 'src/views'); var artFiles = glob.sync(artDir + '/*.art'); var array = []; artFiles.forEach(function(filePath) { var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')); array.push(new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src/template/index.html'), filename: filename + '.html', chunks: ['vendor', 'main', filename], chunksSortMode: function(chunk1, chunk2) { var order = ['vendor', 'main', filename]; var order1 = order.indexOf(chunk1.names[0]); var order2 = order.indexOf(chunk2.names[0]); return order1 - order2; }, minify: { removeComments: env === 'production' ? true : false, collapseWhitespace: env === 'production' ? true : false } })); }); return array; })();
通用模塊提取為組件
對(duì)于一些在多個(gè)頁面中都需要用到的模塊,可將其提取出來作為通用的組件。組件的構(gòu)成與頁面一樣,一個(gè).js文件和一個(gè).art文件以及一個(gè).css文件,在js文件中渲染html內(nèi)容,最后export,使用時(shí)直接require即可。具體實(shí)踐可參考demo
存在問題
- 每新建一個(gè)頁面就需要重新啟動(dòng)webpack服務(wù)
- 字體文件無法壓縮,對(duì)于壓縮通過font-face引入的網(wǎng)絡(luò)字體,目前沒有找到較好的解決方案
demo
基于本文理論的一個(gè)demo,地址:webpack-multipage-demo
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js判斷對(duì)象是否存在某個(gè)屬性的幾種辦法技巧
這篇文章主要給大家介紹了關(guān)于js判斷對(duì)象是否存在某個(gè)屬性的幾種辦法技巧,判斷對(duì)象中是否有某屬性的常見方式總結(jié),不同的場(chǎng)景要使用不同的方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12CSS3 動(dòng)畫卡頓性能優(yōu)化的完美解決方案
今天小編就為大家分享一篇關(guān)于css3 動(dòng)畫卡頓性能優(yōu)化的完美解決方案,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2018-09-09JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)
很多朋友問小編能否通過JavaScript來阻止超鏈接的跳轉(zhuǎn)呢,今天給大家通過多種寫法來實(shí)現(xiàn)這一功能,具體實(shí)例代碼跟隨小編一起看看吧2021-06-06JS實(shí)現(xiàn)換膚功能的方法實(shí)例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)換膚功能的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)頁面元素屬性與樣式動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01JS基于設(shè)計(jì)模式中的單例模式(Singleton)實(shí)現(xiàn)封裝對(duì)數(shù)據(jù)增刪改查功能
這篇文章主要介紹了JS基于設(shè)計(jì)模式中的單例模式(Singleton)實(shí)現(xiàn)封裝對(duì)數(shù)據(jù)增刪改查功能.結(jié)合實(shí)例形式分析了javascript基于單例模式結(jié)合ajax針對(duì)數(shù)據(jù)庫進(jìn)行增刪改查的相關(guān)操作技巧,需要的朋友可以參考下2018-02-02基于touch.js手勢(shì)庫+zepto.js插件開發(fā)圖片查看器(滑動(dòng)、縮放、雙擊縮放)
這篇文章主要為大家詳細(xì)介紹了touch.js手勢(shì)庫結(jié)合zepto.js插件開發(fā)圖片查看器,圖片可以實(shí)現(xiàn)滑動(dòng)、縮放、雙擊縮放等效果,2016-11-11