webpack一般是配合單頁面應用使用，但并不是所有的web應用都是單頁的，有多個頁面的情況還是很多的，當然你可以用其它的構建工具來打包，但對于習慣了webpack的你來說，要是能直接在webpack上做少許配置就可以支持多頁面的打包構建，豈不樂哉！

準備工作

webpack已安裝

webpack-dev-server已配置

js、css、圖片、字體等的loader都已配置完畢

多頁HTML處理

既然是多頁面，也就是說有多個HTML頁面需要處理，而且得根據對應的HTML頁面，打包對應頁面的業務邏輯代碼。比如我們最后想要的打包目錄結構是這樣的：

我們有三個頁面，login.html、index.html、crop.html，我們分別打包出對應的css文件login.css、index.css、crop.css，且js也是如此的打包，可以看一下最后輸出的index.html：

index-page

Hello World!

這是一個多頁面的webpack配置demo

index.html自動插入對應的index.css、index.min.js和公共庫代碼vendors.min.js。

為了實現這個目的，我們把我們的src目錄作如下組織：

template文件夾中放置html的模板頁面，這里配合html-withimg-loader還可以實現模板的拆分：

#include("./layout/meta.html")

crop-page

#include("./layout/header.html")

#include("./layout/footer.html")

view文件夾則放置每個頁面的入口文件，在入口文件里加載一些必要的資源：

import $ from 'jquery';

import 'bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

import '../css/index.css';

$(function () {

console.log('index page');

});

根據我們的目錄結構，我們需要一個方法來得到entry和文件的對應關系，我們引入模塊blob，實現如下方法：

// 獲取指定路徑下的入口文件

function getEntries(globPath) {

var files = glob.sync(globPath),

entries = {};

files.forEach(function(filepath) {

// 取倒數第二層(view下面的文件夾)做包名

if(filepath.match(/\.js$/)){

var split = filepath.split('/');

var fileName = split[split.length - 1];

var name = fileName.substring(0, fileName.length - 3);

entries[name] = './' + filepath;

}

});

return entries;

}

然后dev模式下，我們需要在entry里設置dev-server和hot-reload，所以我們配置里的entry應該是一個數組，同時，我們還得為每一個html頁面都插入對應的資源：

var entries = getEntries('src/view/**');

webpackConfig.entry.push('webpack-dev-server/client?http://0.0.0.0:8090');

webpackConfig.entry.push('webpack/hot/only-dev-server');

Object.keys(entries).forEach(function(name) {

// 每個頁面生成一個entry，如果需要HotUpdate，在這里修改entry

webpackConfig.entry.push(entries[name]);

// 每個頁面生成一個html

var plugin = new HtmlWebpackPlugin({

// 生成出來的html文件名

filename: name + '.html',

// 每個html的模版，這里多個頁面使用同一個模版

template: './src/template/'+ name +'.html',

// 自動將引用插入html

inject: true

});

webpackConfig.plugins.push(plugin);

});

prod模式下，我們的entry應該是一個對象，并為每個入口添加注入對應的資源，由此我們得作如下配置：

var entries = getEntries('src/view/**');

Object.keys(entries).forEach(function(name) {

webpackConfig.entry[name] = entries[name];

// 每個頁面生成一個html

var plugin = new HtmlWebpackPlugin({

// 生成出來的html文件名

filename: name + '.html',

// 每個html的模版，這里多個頁面使用同一個模版

template: './src/template/'+ name +'.html',

// 自動將引用插入html

inject: true,

// 每個html引用的js模塊，也可以在這里加上vendor等公用模塊

chunks: ['vendors', name]

});

webpackConfig.plugins.push(plugin);

});

webpackConfig.entry['vendors'] = ['jquery', 'bootstrap'];

這樣，我們的多頁面配置就搞定了，只需在單頁的基礎上，對entry做一些處理即可，改動并不算太多吧！

總結

以上是生活随笔為你收集整理的webpack多个Html,少量修改webpack配置支持打包多页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。