文章目录

1. 1. 利用 vue-cli 的配置，扩展成多页应用
2. 2. gulp 项目转化成 webpack 之后的痛
3. 3. 抛弃 webpack 多页应用配置
4. 4. 下篇基于 webpack 的多页应用新方案

本篇主要关于如何用 webpack 构建多页应用

为什么要构建多页应用呢？因为我的项目本来就是多页应用啊
至于为什么要用 webpack？因为我要用 vue 啊，嫌 gulp 每次打包慢 啊

利用 vue-cli 的配置，扩展成多页应用

想法总是简单，实践总是多坑。

理论支持：spa 为单页，那么我是不是输出多个页面就成了多页呢？好像很对的样子。
问题来了，如何才能输出多个页面，主意很容易打到 html 处理插件 html-webpack-plugin上面。
单页面输出:

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: path.resolve(__dirname, './app/views/index.html'),
    inject: true
})

多页面只需要多 new 几个 HtmlWebpackPlugin 就好了嘛
马上实践，果然可以，✌️。那就动动吧！
兴奋的修改配置如下:

# webpack.base.conf.js

entry: getEntry(),
//获取js下面的所有输出js,多页面嘛
function getEntry() {
	var jsPath = fs.readdirSync('./js/');
	var matchs = [],files = {};
	jsPath.forEach(function(item) {
		matchs = item.match(/(.+)\.js$/);
		if (matchs) {
			files[matchs[1]] = path.resolve('./js/', item);
		}
	});
	return files;
}

# webpack.dev.conf.js
var baseWebpackConfig = require('./webpack.base.conf');
var pages = function() {
  var dir = fs.readdirSync(path.resolve(__dirname, '../views/'));
  return dir.filter(function(name) {
    return name.match(/\.html$/);
  });
}();

for(var i = 0; i<pages.length; i++){
  var chunkname = pages[i];
  var conf = {
    filename: chunkname,
    template: path.resolve(__dirname, '../views/'+chunkname),
    inject: false
  }
  baseWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

想必聪明的你还记得我之前说过的 inject 这个参数吧
如果 inject: true,那么每个页面会注入 entry 中所有的 js，所以配置为 false，js 自己写入

相对的,webpack.prod.conf.js 也需要做相应配置。
至于其他资源文件路径什么报错问题，请自行解决，毕竟项目架构不同，错误也不尽相同。

我也是吃了很多苦头，排尽万难，终于把之前用 gulp 搭建的项目转换成 webpack 之后，并没有兴奋。
因为结果并不令我满意，为什么呢？

gulp 项目转化成 webpack 之后的痛

• 项目大概二十多个页面（就是.html 文件），启动项目需要一分钟

  啦啦啦
  我在等一分钟
  或许下一分钟
  能够感觉你也心痛
  …
  我想哭

• 还没有引入 babel，引入 babel 转码之后，es6 语法不生效
  明明引入了 babel 转码，为毛始终不生效，头痛许久，查找到问题根源，
  修改： include: ‘./js’ —-> include: “/“
  原因未明

• es6 语法解决之后，打包更慢了，何止一分钟。。。这次不仅仅想哭

• 虽说整个项目用 webpack 打包，但是还有一些 task 必须依赖 gulp 完成，定制需求。

抛弃 webpack 多页应用配置

因为坑太多，太慢，太痛，太捉急，等等。至此搁笔，果断抛弃此方案！

下篇基于 webpack 的多页应用新方案