1. 目标分析

1. 一个项目中保存了多个 HTML 模版，不同的模版有不同的入口，并且有各自的 router、store 等；

2. 不仅可以打包出不同 HTML，而且开发的时候也可以顺利进行调试；

3. 不同入口的文件可以引用同一份组件、图片等资源，也可以引用不同的资源；

2. 准备工作

.	├── 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

这里顺便介绍在不同系统下生成目录树的方法：

1. mac 系统命令行生成目录树的方法 tree-I node_modules--dirsfirst ，这个命令的意思是，不显示 node_modules 路径的文件，并且以文件夹在前的排序方式生成目录树。如果报没有找到 tree 命令的错，安装 tree 命令行 brew install tree 即可。

2. windows 系统在目标目录下使用 tree/f1.txt 即可把当前目录树生成到一个新文件 1.txt 中。

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 服务功能	}

1. entry： 入口文件配置项，可以为字符串、对象、数组。以上面的对象形式为例， app 是入口名称，如果 output.filename 中有 [name] 的话，就会被替换成 app。

2. context： 是 webpack 编译时的基础目录，用于解析 entry 选项的基础目录(绝对路径)， entry 入口起点会相对于此目录查找，相当于公共目录，下面所有的目录都在这个公共目录下面。

3. output： 出口文件的配置项。

4. output/path： 打包文件输出的目录，比如上面的 dist，那么就会将输出的文件放在当前目录同级目录的 dist 文件夹下，没有这个文件夹就新建一个。可以配置为 path.resolve(__dirname,'./dist/${Date.now()}/') （md 语法不方便改成模板字符串，请自行修改）方便做持续集成。

5. output.filename： 输出的文件名称， [name] 的意为根据入口文件的名称，打包成相同的名称，有几个入口，就可以打包出几个文件。比如入口的 key 为 app，打包出来就是 app.js，入口是 my-entry，打包出来就是 my-entry.js。

6. output.publicPath： 静态资源的公共路径，可以记住这个公式： 静态资源最终访问路径=output.publicPath+资源loader或插件等配置路径。举个例子， publicPath 配置为 /dist/，图片的 url-loader 配置项为 name:'img/[name].[ext]' ，那么最终打包出来文件中图片的引用路径为 output.publicPath+'img/[name].[ext]'='/dist/img/[name].[ext]'。

1. 根据模版生成 HTML 文件；

2. 给生成的 HTML 文件引入外部资源比如 link、 script 等；

3. 改变每次引入的外部文件的 Hash，防止 HTML 引用缓存中的过时资源；

3. 开始配置

3.1 文件结构改动

.	├── 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

3.2 简单配置

// build/webpack.prod.conf.js	module.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文件的名称	        })	    ]	}

3.3 打包出不同的 HTML 页面

// build/webpack.prod.conf.js	module.exports = {	  entry: {	    entry: './src/main.js',   // 打包输出的chunk名为entry	    entry2: './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']	    })	  ]	}

1. vendor 是指提取涉及 node_modules 中的公共模块；

2. manifest 是对 vendor 模块做的缓存；

4. 配置改进

4.1 文件结构改动

1. 首先我们在根目录创建一个 entries 文件夹，把不同入口的 router、 store、 main.js 都放这里，每个入口相关单独放在一个文件夹；

2. 在 src 目录下建立一个 common 文件夹，用来存放多入口共用的组件等；

.	├── 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

4.2 webpack 配置

// 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	}

1. exports.entries 函数从 entries 文件夹中找到二级目录下的 JS 文件作为入口文件，并且将二级目录的文件夹名作为 key，生成这样一个对象：{"entry1":"/multi-entry-vue/entries/entry1/main.js"}，多个入口情况下会有更多键值对；

2. exports.htmlPlugin 函数和之前函数的原理类似，不过组装的是 HtmlWebpackPlugin插件的配置，生成这样一个数组，可以看到和我们手动设置的配置基本一样，只不过现在是根据文件夹结构来生成的：

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

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

---

参考：

1. webpack解惑：多入口文件打包策略

2. webpack配置文件：入口和出口，多入口、多出口配置

3. 一看就懂之webpack高级配置与优化