在webpack中如何實現多頁面開發

這篇文章主要介紹了webpack多頁面開發實踐，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

寫在前面

webpack是一款模組載入器兼打包工具，能把js,css,頁面，圖片，視訊等各種資源，進行模組化處理。而現在網路上流傳很多單頁的webpack模型，那多頁呢？比較少，現在我提供一個多頁面的前端模型。希望大家適合使用。

在最開始接觸webpack的時候，我都覺得webpack只適用於單一頁面應用，像是webpack react，webpack vue。我自己在使用webpack vue建構專案及開發的過程中感受到了webpack的強大與方便。基於實際專案需求，我在想，多頁面網站是否也能使用webapck來建置呢？於是就開始了一番探索，最後算是搭建了一套比較完整的解決方案。

本文以一個實際專案為例子，講述在多頁面專案中如何使用webpack進行工程化建構。本文是自己的實務經驗總結，所以有些解決方案並不是最優的，仍在探索優化中，如果有任何錯誤紕漏，歡迎指出。

簡介

本專案主要基於webpack2.x構建，以gulp作為輔助工具。前端使用art-template作為模板引擎，一個頁面對應一個模板檔案和一個入口文件，入口文件中可以透過import或require引入其他模組，這些模組webpack會自動跟入口文件合併為一個文件。

前端開發環境建構

主要目錄結構

├─dist          #打包后生成的文件目录
└─src           #开发目录
  ├─components     #通用组件
  ├─static       #静态资源目录
  │ ├─css
  │ ├─img
  │ └─js
  │   ├─component  #站点通用组件对应的js
  │   ├─lib     #第三方js库
  │   ├─services   #各页面入口
  │   └─util     #通用工具js
  ├─template      #html模板
  └─views        #页面
   main.js       #公共入口
gulpfile.js        #gulp任务配置
package.json       #项目依赖
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;
})();

這個方法將產生檔名到檔案絕對路徑的map， 例如

entry: {
  'page-1': '/../webpack-multipage-demo/src/static/js/services/page-1.js'
}

#熱更新

熱更新簡直不要太好用，極大提高了開發效率。

//服务器配置
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，即可實現熱更新。

產生html設定

約定相同頁面的js檔案與範本檔案命名一致，最後根據該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;
})();

通用模組提取為元件

對於在多個頁面中都需要用到的一些模組，可將其提取出來作為通用的元件。元件的構成與頁面一樣，一個.js檔案和一個.art檔案以及一個.css文件，在js檔案中渲染html內容，最後export，使用時直接require即可。具體實踐可參考demo

存在問題

1. #每新建一個頁面就需要重新啟動webpack服務

2. 字體檔案無法壓縮，對於壓縮透過font-face引入的網頁字體，目前沒有找到較好的解決方案

demo

#基於本文理論的demo，地址：webpack-multipage-demo

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在Vue中如何實作數字輸入框元件

使用jquery如何實作側邊欄左右伸縮效果

在JS函數中有關setTimeout詳細介紹

#在mongoose中有關於更新物件的詳細介紹

在JavaScript中如何實作AOP

#

以上是在webpack中如何實現多頁面開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！