寫在前面

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請(qǐng)域名、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、浦城網(wǎng)站維護(hù)、網(wǎng)站推廣。

webpack是一款模塊加載器兼打包工具，能把js,css,頁(yè)面，圖片，視頻等各種資源，進(jìn)行模塊化處理。而現(xiàn)在網(wǎng)上流傳很多單頁(yè)面的webpack模型，那多頁(yè)面呢？比較少，現(xiàn)在我提供一個(gè)多頁(yè)面的前端模型。希望大家適合使用。

在最開始接觸webpack的時(shí)候，我都覺得webpack只適用于單頁(yè)面應(yīng)用，比如webpack+react，webpack+vue。我自己在使用webpack+vue構(gòu)建項(xiàng)目及開發(fā)的過(guò)程中感受到了webpack的強(qiáng)大和方便?；趯?shí)際項(xiàng)目需求，我在想，多頁(yè)面站點(diǎn)是否也能使用webapck來(lái)構(gòu)建呢？于是就開始了一番探索，最終算是搭建了一套比較完整的解決方案。

本文以一個(gè)實(shí)際項(xiàng)目為例子，講述在多頁(yè)面項(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è)頁(yè)面對(duì)應(yīng)一個(gè)模板文件和一個(gè)入口文件，入口文件中可以通過(guò)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庫(kù)
  │   ├─services   #各頁(yè)面入口
  │   └─util     #通用工具js
  ├─template      #html模板
  └─views        #頁(yè)面
   main.js       #公共入口
gulpfile.js        #gulp任務(wù)配置
package.json       #項(xiàng)目依賴
webpack.config.js     #webpack配置

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站欄目：webpack多頁(yè)面開發(fā)實(shí)踐-創(chuàng)新互聯(lián)
瀏覽地址：http://weahome.cn/article/csiodj.html