寫在前面

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比大余網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式大余網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋大余地區(qū)。費(fèi)用合理售后完善，十載實(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庫(kù)
  │   ├─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

存在問題

1. 每新建一個(gè)頁面就需要重新啟動(dòng)webpack服務(wù)
2. 字體文件無法壓縮，對(duì)于壓縮通過font-face引入的網(wǎng)絡(luò)字體，目前沒有找到較好的解決方案

demo

基于本文理論的一個(gè)demo，地址：webpack-multipage-demo

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前文章：webpack多頁面開發(fā)實(shí)踐
本文路徑：http://chinadenli.net/article4/gicjoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)公司、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)