vue+webpack多页面应用设置

整   理：晋 哲

时   间：2017-04-10

说   明：vue+cli脚手架默认搭建的是单页面应用，在实际项目中需要优化配置生成多页面。

设置步骤：
一、修改src文件结构
图一为脚手架默认生成的src结构

图二为调整后的文件结构，新建module文件夹，将每个页面都对应一个同名的文件夹

比如：login文件夹里的三个文件是由原先的App.vue、main.js、index.html整合到一个文件夹内进行修改，welcome文件夹就是再复制一份修改

二、修改build内的文件配置
主要是调整webpack中html-webpack-plugin插件的默认设置，这是用来将js和html对应起来的插件
调整三处js文件，如下图：

1、webpack.base.conf.js
（1）在头部添加下面两行代码

var glob = require('glob'); // 引入glob工具
var entries = getEntry('./src/module/**/*.js'); // 获得入口js文件

（2）再将entry的配置修改为entries

（3）在底部添加getEntry方法，用于匹配路径

function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
    entries[pathname] = entry;
  });
  return entries;
}

2、webpack.dev.conf.js
（1）在头部添加下面两行代码，引入path和glob工具

// 引入path和glob工具
var path = require('path');
var glob = require('glob');

（2）将HtmlWebpackPlugin默认设置注释掉

（3）在底部也添加getEntry方法，并添加自定义HtmlWebpackPlugin插件的配置

function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function(entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
    entries[pathname] = entry;
  });
  return entries;
}

// 自定义HtmlWebpackPlugin插件配置
var pages = getEntry('./src/module/**/*.html');
for (var pathname in pages) {
  // 配置生成的html文件，定义路径等
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname], // 模板路径
    minify: { //传递 html-minifier 选项给 minify 输出
      removeComments: true
    },
    inject: 'body', // js插入位置
    chunks: [pathname, "vendor", "manifest"] // 每个html引用的js模块，也可以在这里加上vendor等公用模块
  };
  // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

3、webpack.prod.conf.js
和上一个文件webpack.dev.conf.js中做类似的处理，先注释掉原来的HtmlWebpackPlugin，然后在下面添加函数，通过迭代插入多个HtmlWebpackPlugin。

三、最终生成的文件会打包进对应的文件夹内
对比默认生成文件结构与修改后生成文件