最近，一直嘗試使用webpack做多頁面應用的開發。並且一個實際的項目爲原型，實現對一個靜態的企業站進行優化。原站點地址，測試站點地址。
如果想要做一個自己個個人博客，或者企業官網來說，有一定的參考意義。
webpack的resolve.alias
在做模塊化開發的過程中，有一個需要解決的問題就是引用模塊的路徑問題。
注：在webpack中，每一個文件（不管是js，css, html，還是圖片等）都被稱之爲一個塊。
爲了實現模塊化，細粒度化的控制，往往會將代碼塊分成爲不可分割的塊，這樣做雖然方便了管理控制，但是也會造成項目的文件嵌套很嚴重，再飲用的時候需要格外小心路徑，同時也會造成開發者的負擔（拋開其他不講，但從技術角度來說，對於開發人員來說，能用一行代碼解決的問題，絕不用兩行，能少輸入一個單詞就少輸入一個）。
而webpack的resolve.alias可以爲指定路徑的字符串起別名。在本文所使用的示例，這樣定義別名：
...
resolve: {
alias: {
'@': path.join(__dirname, '..', 'pages/'), // 根目錄
'@css': path.join(__dirname, 'assets/css/'), // css
'@img': path.join(__dirname, 'assets/imgs/'), // picture
// '@font': path.join(__dirname, 'assets/fonts/'),
'@data': path.join(__dirname, 'pages/data/'), // mock data
'@utils': path.join(__dirname, 'pages/utils/') // snippets code
}
},
...
當然，上面的別名並不是萬能的，有一個問題就是background-iamge 和 font-face 的使用url()會有一些問題，url()中的路徑必須是字符串，暫時沒有好的辦法解決。
但是使用sass，可以定義變量，可以通過變量來指定路徑，但是要嚴格控制引用變量模塊的文件的目錄，在本文所使用的示例中，統一將應用變量文件assets/css/path.scss的文件，控制在兩個層級。具體可參考所提供源代碼中的具體使用。
模擬數據
實際的項目沒有使用任何一種語言的後端代碼，更不用說數據庫。全部使用的是模擬數據。
爲了方便管理維護項目的模擬數據，將項目的所有數據統一整理到了示例的pages/data目錄下。
靜態資源圖片的處理
第一優化的時候，就簡單的講了下，如何使用imagemin提供的插件，來實現對常見類型（.jpg，.png，*.gif）圖片的處理。
第一種引用圖片的方案
之前做單頁面應用開發的時候，喜歡將所有的圖片優化處理後統一放在一個目錄中，然後將它們放在服務器中，最後在開發或生產環境中，使用絕對路徑進行訪問。
這種方式的好處是不用擔心相對路徑造成的路徑問題。但是缺點是，操作起來不方便，尤其是開發環境。因爲你不知道項目究竟要使用多少的靜態資源，尤其是使用哪種靜態資源。
這種方式在團隊合作的項目中，比較常見，但是對於提升團隊的效率並不明顯。
第二種引用圖片的方案
所以，對於開發者來說，如果如果需要什麼靜態資源，就放在自己的本地目錄，這樣可以隨心所欲的添加。
在本文所採用的示例中，我做了一些嘗試，將所有的圖片資源進行了分類。需要轉化爲base64的圖片放一個文件夾assets/imgs/base64/，需要合成雪碧圖的單獨放在一個文件夾；assets/imgs/sprites/，爲了方便管理合成不同雪碧圖的源圖片，我又在該目錄下創建了子文件夾；而對於<img src="..." />要引用的圖片的存放使用了兩個文件夾，assets/imgs/static存放了未經優化的所有的圖片，而目錄assets/imgs/others，存放了所有優化過的圖片（包含兩部分，一部分是使用npm run img命令優化的assets/imgs/static目錄下的圖片，另一部分是npm run dev命令優化的雪碧圖圖片，它的前綴帶有*-sprite這樣的後綴）。
這種方案，使用的是相對路徑應用圖片。可參考pages/data/contactus.js文件的代碼：
const loadImg = require('@utils/load-img')
module.exports = {
cn_name: '聯繫我們',
en_name: 'CONTACT US',
img: loadImg('second/contactus-tag.png'),
...
}
而工具代碼片段loadImg的代碼如下：
module.exports = function(str) {
return require('@img/other/' + str)
}