關于webpack的配置和使用，網上已經有許多文章了，大多是在講單頁應用，當我們需要打包多個html時，事情就變得麻煩起來。怎么在webpack-dev-server里使用路由？怎么打包多個html和js chunk并自動更新md5？本文講的就是如何解決這些問題。

這里假設你對Webpack已經有最基礎的了解

需求

來看下我們的需求:

使用webpack-dev-server做開發時的服務器 在webpack-dev-server里使用路由，訪問/a時候顯示a.html，/b顯示b.html 打包成多個html，給其中引用到資源加md5戳

主要目錄結構

├── src            │  └── views         # 每一個文件夾對應一個頁面│    └── a         │      └── index.js│    └── b         │      └── index.js├── output          # 打包輸出的目錄|  └── ...└── template.html       # 將根據這個模版，生成各個頁面的html└── webpack.config.js└── dev-server.js       # webpack-dev-server + express    

只列出了主要的目錄，這里我們根據一個template.html來生成多個頁面的html，他們之間只有引用的資源路徑不同。當然，你也可以每個頁面單獨使用一個html模版。

Webpack 配置

這里主要解決兩個小問題。

1. 打包多個頁面的js文件

讀取src/views下的目錄，約定每一個目錄當成一個頁面，打包成一個js chunk。

2. 打包多個html

循環生成多個HtmlWebpackPlugin插件，把每一個插件的chunks各自指向上面打包的js chunk。

// webpack.config.jsvar glob = require('glob');var webpackConfig = {  /* 一些webpack基礎配置 */  };// 獲取指定路徑下的入口文件function getEntries(globPath) {   var files = glob.sync(globPath),    entries = {};   files.forEach(function(filepath) {     // 取倒數第二層(view下面的文件夾)做包名     var split = filepath.split('/');     var name = split[split.length - 2];     entries[name] = './' + filepath;   });   return entries;}    var entries = getEntries('src/view/**/index.js');Object.keys(entries).forEach(function(name) {  // 每個頁面生成一個entry，如果需要HotUpdate，在這里修改entry  webpackConfig.entry[name] = entries[name];    // 每個頁面生成一個html  var plugin = new HtmlWebpackPlugin({    // 生成出來的html文件名    filename: name + '.html',    // 每個html的模版，這里多個頁面使用同一個模版    template: './template.html',    // 自動將引用插入html    inject: true,    // 每個html引用的js模塊，也可以在這里加上vendor等公用模塊    chunks: [name]  });  webpackConfig.plugins.push(plugin);})

路由配置

在多頁應用下，我們希望訪問的是localhost:8080/a，而不是localhost:8080/a.html。

由于webpack-dev-server只是將文件打包在內存里，所以你沒法在express里直接sendfile('output/views/a.html')，因為這個文件實際上還不存在。還好webpack提供了一個outputFileStream，用來輸出其內存里的文件，我們可以利用它來做路由。