前言

最近由於專案需求，選擇使用vue框架，webpack打包直接使用的vue-cli，因為需要多頁面而vue-cli只有單頁面，所以就決定修改vue-cli的配置檔案來滿足開發需求。

html-webpack-plugin

實現需求需要用到這個外掛， 具體資訊請看這裡

對於多頁面入口我們需要在外掛陣列中多次宣告該外掛
To generate more than one HTML file, declare the plugin more than once in your plugins array

對於正常的開發需求我們需要配置該外掛的資訊（這裡只介紹一些基本的資訊，讀者可根據自身情況擴充套件）

title: 檔案標題資訊（對於多個檔案使用同一個模板檔案很有用，在模板檔案的title中新增程式碼 <%= htmlWebpackPlugin.options.title %>）
template: 模板檔案（模板html檔案）
filename: 生成的html檔名
chunks: 允許插入的模組名（此處一般新增公共塊，以及每個頁面獨立的塊，請注意新增的順序）

以上這些配置是我舉例需要獨立控制的配置資訊，有關配置的其他資訊這裡不再多說。

我們需要單獨建立一個配置檔案來定義我們上邊的自定義資訊，這裡呢在config檔案下新增multiple.js檔案

multiple.js

簡單粗暴上段程式碼：

const path = require('path');

module.exports = {
  index: 'page1/index.html',
  pages: [
    {
      page: 'page1', entry: path.resolve(__dirname, '../src/page1/main.js'), title: '這是頁面1', filename: path.resolve(__dirname, '../dist/page1/index.html'), template: path.resolve(__dirname, '../index.html') }, { page: 'page2', entry: path.resolve(__dirname, '../src/page2/main.js'), title: '這是頁面2', filename: path.resolve(__dirname, '../dist/page2/index.html'), template: path.resolve(__dirname, '../index.html') }, *** }
 

其中index表示開發階段devServer使用的首頁，便於控制（也可以不設定直接在devServer裡配置）

正文

哈哈哈，前邊都是基礎準備工作，
接下來開始正文，我們知道對於多頁面配置首先要webpack的entry為多入口，所以在webpack的 base 配置中配置多入口，因為這個入口檔案需要我們在multiple.js中控制，所以首先引入multiple.js，然後生成entry物件

/* webpack.base.conf.js */

const multiple = require('../config/multiple')  // 引入檔案

const entry = {}; multiple.pages.forEach((value, index) => { entry[value.page] = value.entry; }) // 在webpack配置中配置 const webpackConfig = { *** entry: entry, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, *** } multiple.pages.forEach((value, index) => { webpackConfig.plugins.push( new HtmlWebpackPlugin({ title: value.title || '這裡是標題', filename: value.filename, template: value.template, inject: true, hash: true, chunks: ['manifest', 'vendor', 'app', value.page], minify: false, chunksSortMode: 'dependency' }) ) }) ***

注：在vue-cli配置中的webpack.prop.conf.js有配置HtmlWebpackPlugin，注意將其註釋掉

在 webpack.dev.conf.js 中的devServer配置中可以自定義開啟首頁，這個可以根據需求配置此處不再贅餘。

至此所有的配置已完成，可以修改 multiple.js 檔案定製自己的多頁面開發了

總結一下，我們需要修改的檔案

webpack.base.conf.js 修改入口檔案，根據我們的配置檔案
webpack.prop.conf.js 註釋掉預設的HtmlWebpackPlugin配置
webpack.dev.conf.js 根據需求定製入口頁面
multiple.js 定製我們自己的多頁面資訊

另：對於我們的 vendor 檔案我們也需要做出相應的修改（主要是應對不同頁面引用不同的公共檔案，而造成頁面載入不必要的檔案）（需要的外掛 webpack.optimize.CommonsChunkPlugin ），具體的配置修改，將在下次說明。手動[調皮]

原文地址