详解vue-cli + webpack 多页面实例应用

# install dependencies
npm install

# serve with hot reload at localhost:8080/module/index.html
npm run dev

# build for production with minification
npm run build

vue-cli-multipage
 |---build
 |---config
 |---src
  |---assets
   |---img 图片文件
   |---css 样式文件
   |---font 字体文件   
  |---ponents 组件
   |---Button.vue 按钮组件
   |---Hello.vue
  |---module
   |---index 首页模块
    |---index.html
    |---index.js
    |---App.vue
   |---detail 详情页模块
    |---detail.html
    |---detail.js
    |---App.vue

|---index 首页模块
 |---index.html
 |---index.js
 |---App.vue

import Hello from 'ponents/Hello'

import Hello from 'ponents/Hello'

export default {
 name: 'app',
 ponents: {
  //在这里注册组件，不然无法使用
  Hello
 }
}

/
  [webpack.base.conf.js]这里主要列出相关代码的修改点，具体代码请看build/webpack.base.conf.js
/
var entries = getEntry('./src/module//.js'); // 获得入口js文件

module.exports = {
 entry: entries,
 ....
}

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

/
  [webpack.prod.conf.js]这里主要列出相关代码的修改点，具体代码请看build/webpack.base.prod.js
/
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;
}

var pages = getEntry('./src/module//.html');

for (var pathname in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname],  // 模板路径
  inject: true,       // js插入位置
  minify: {
   //removeComments: true,
   //collapseWhitespace: true,
   //removeAttributeQuotes: true
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
 };

 if (pathname in module.exports.entry) {
  conf.chunks = ['manifest', 'vendor', pathname];
  conf.hash = true;
 }

 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}