vue&webpack多頁面配置

前言

最近由於項目需求，選擇使用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 ），具體的配置修改，將在下次說明。手動[調皮]

原文地址

歡迎交流學習