.
├── build
├── config
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── router
│   │   └── index.js
│   ├── App.vue
│   └── main.js
├── static
├── README.md
├── index.html
├── package-lock.json
└── package.json

const path = require('path')
module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},output: {path: path.resolve(__dirname, '../dist'),filename: 'output-file.js',publicPath: '/'},module: {},        // 文件的解析 loader 配置plugins: [],       // 插件，根据需要配置各种插件devServer: {}      // 配置 dev 服务功能
}

.
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js    # 主要配置目标
│   └── webpack.prod.conf.js   # 主要配置目标
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── router
│   │   └── index.js
│   ├── App.vue
│   ├── App2.vue       # 新增的入口
│   ├── main.js
│   └── main2.js       # 新增的入口
├── static
├── README.md
├── index.html
└── package.json

// build/webpack.prod.conf.jsmodule.exports = {entry: {entry1: './src/main.js',entry2: './src/main2.js'},output: {filename: '[name].js',publicPath: '/'},plugins: [new HtmlWebpackPlugin({template: "index.html",  // 要打包输出哪个文件，可以使用相对路径filename: "index.html"   // 打包输出后该html文件的名称})]
}

// build/webpack.prod.conf.jsmodule.exports = {entry: {entry: './src/main.js',   // 打包输出的chunk名为entryentry2: './src/main2.js'  // 打包输出的chunk名为entry2},output: {filename: '[name].js',publicPath: '/'},plugins: [new HtmlWebpackPlugin({filename: 'entry.html',  // 要打包输出的文件名template: 'index.html',  // 打包输出后该html文件的名称chunks: ['manifest', 'vendor', 'entry']  // 输出的html文件引入的入口chunk// 还有一些其他配置比如minify、chunksSortMode和本文无关就省略，详见github}),new HtmlWebpackPlugin({filename: 'entry2.html',template: 'index.html',chunks: ['manifest', 'vendor', 'entry2']})]
}

.
├── build    # 没有改动
├── config   # 没有改动
├── entries  # 存放不同入口的文件
│   ├── entry1
│   │   ├── router       # entry1 的 router
│   │   │   └── index.js
│   │   ├── store        # entry1 的 store
│   │   │   └── index.js
│   │   ├── App.vue      # entry1 的根组件
│   │   ├── index.html   # entry1 的页面模版
│   │   └── main.js      # entry1 的入口
│   └── entry2
│       ├── router
│       │   └── index.js
│       ├── store
│       │   └── index.js
│       ├── App.vue
│       ├── index.html
│       └── main.js
├── src
│   ├── assets
│   │   └── logo.png
│   ├── common          # 多入口通用组件
│   │   └── CommonTemplate.vue
│   └── components
│       ├── HelloWorld.vue
│       ├── test1.vue
│       └── test2.vue
├── static
├── README.md
├── index.html
├── package-lock.json
└── package.json

// build/utils
const fs = require('fs')
const glob = require('glob')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ENTRY_PATH = path.resolve(__dirname, '../entries')// 多入口配置，这个函数从 entries 文件夹中读取入口文件，装配成webpack.entry配置
exports.entries = function() {const entryFiles = glob.sync(ENTRY_PATH + '/*/*.js')const map = {}entryFiles.forEach(filePath => {const filename = filePath.replace(/.*/(w+)/w+(.html|.js)$/, (rs, $1) => $1)map[filename] = filePath})return map
}// 多页面输出模版配置 HtmlWebpackPlugin，根据环境装配html模版配置
exports.htmlPlugin = function() {let entryHtml = glob.sync(ENTRY_PATH + '/*/*.html')let arr = []entryHtml.forEach(filePath => {let filename = filePath.replace(/.*/(w+)/w+(.html|.js)$/, (rs, $1) => $1)let conf = {template: filePath,filename: filename + '.html',chunks: [filename],inject: true}// production 生产模式下配置if (process.env.NODE_ENV === 'production') {conf = merge(conf, {chunks: ['manifest', 'vendor'],minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true},chunksSortMode: 'dependency'})}arr.push(new HtmlWebpackPlugin(conf))})return arr
}

// production 下
[{template: "/multi-entry-vue/entries/entry1/index.html",chunks: ['manifest', 'vendor', 'entry1'],filename: "entry1.html",chunksSortMode: 'dependency'},{ ... }   // 下一个入口的配置
]

// build/webpack.base.conf.jsmodule.exports = {entry: utils.entries(),   // 使用函数生成 entry 配置output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath}
}

// build/webpack.dev.conf.js// const HtmlWebpackPlugin = require('html-webpack-plugin')  // 不需要了const devWebpackConfig = merge(baseWebpackConfig, {devServer: {historyApiFallback: {rewrites: [        // 别忘了把 devserver 的默认路由改一下{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'entry1.html') },],}},plugins: [// https://github.com/ampedandwired/html-webpack-plugin// new HtmlWebpackPlugin({//   filename: 'index.html',//   template: 'index.html',//   inject: true// }),                   // 注释掉原来的 HtmlWebpackPlugin 配置，使用生成的配置].concat(utils.htmlPlugin())
})

// build/webpack.dev.conf.js// const HtmlWebpackPlugin = require('html-webpack-plugin')  // 不需要了const devWebpackConfig = merge(baseWebpackConfig, {devServer: {historyApiFallback: {rewrites: [        // 别忘了把 devserver 的默认路由改一下{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'entry1.html') },],}},plugins: [// https://github.com/ampedandwired/html-webpack-plugin// new HtmlWebpackPlugin({//   filename: 'index.html',//   template: 'index.html',//   inject: true// }),                   // 注释掉原来的 HtmlWebpackPlugin 配置，使用生成的配置].concat(utils.htmlPlugin())
})

// build/webpack.prod.conf.js// const HtmlWebpackPlugin = require('html-webpack-plugin')const webpackConfig = merge(baseWebpackConfig, {plugins: [// new HtmlWebpackPlugin({//   ... 注释掉，不需要了// }),].concat(utils.htmlPlugin())
})