寫在前面

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，即可實現熱更新。