appindex-pcindex

 |- pages
 |  |- pc
 |  |  |- assets
 |  |  |- components
 |  |  |- router
 |  |  |- App.vue
 |  |  |- index.html
 |  |  |- main.js
 |  |-mobile
 |  |  |- assets
 |  |  |- components
 |  |  |- router
 |  |  |- App.vue
 |  |  |- index.html
 |  |  |- main.js
 |- main.js

const isPc = () => {
return !isMobile()
}

const isMobile = () => {
return /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(navigator.userAgent)
}

const params = window.location.search + window.location.hash

if (isPc()) {
window.location.href = 'pc_index.html' + params
} else if (isMobile()) {
window.location.href = 'mobile_index.html' + params
}

var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var merge = require('webpack-merge')
//页面根目录
var PAGE_ROOT_PATH = path.resolve(__dirname, '../src/pages')
//取页面清单
function getPages() {
  let entryHtmlFiles = glob.sync(PAGE_ROOT_PATH + '/*/index.html')
  let pages = []
  entryHtmlFiles.forEach((filePath) => {
    let pagePath = filePath.substring(0, filePath.lastIndexOf('\/'))
    let pageName = pagePath.substring(pagePath.lastIndexOf('\/') + 1)
    pages.push(pageName)
  })
  return pages
}
//生成入口
exports.entries = function () {
  var map = {}
  getPages().forEach((pageName) => {
    let filePath = PAGE_ROOT_PATH + '/' + pageName + '/main.js'
    map['app_' + pageName] = filePath
  })
  return map
}

module.exports = {
    ...
    entry: Object.assign({app: './src/main.js'}, utils.entries()),
    ...
}

exports.htmlPlugins = function () {
  let plugins = []
  getPages().forEach((pageName) => {
    let templateFilePath = PAGE_ROOT_PATH + '/' + pageName + '/index.html'
    let outputFileName = pageName + '_index.html'
    let conf = {
      template: templateFilePath,
      filename: outputFileName,
      chunks: ['manifest', 'vendor', 'vendor_' + pageName, 'app_' + pageName],
      inject: true
    }
    if (process.env.NODE_ENV === 'production') {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency'
      })
    }
    plugins.push(new HtmlWebpackPlugin(conf))
  })
  return plugins
}

plugins: [
    ...
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      chunks: ['app'],  //修改这里
      inject: true
    }),
    ...
].concat(utils.htmlPlugins()) //修改这里

plugins: [
    ...
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      chunks: ['app'], //修改这里
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    ...
].concat(utils.htmlPlugins()) //修改这里

plugins: [
    ...
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor_pc',
      chunks: ['app_pc'],
      minChunks(module) {
        console.log(module.resource)
        return module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../node_modules')) == 0
      }
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor_mobile',
      chunks: ['app_mobile'],
      minChunks(module) {
        return module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../node_modules')) == 0
      }
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      chunks: ['vendor_pc', 'vendor_mobile'],
      minChunks: 2
    }),
    ...
]

name：可以是已经存在的chunk（一般指入口文件）对应的name，那么就会把公共模块代码合并到这个chunk上；否则，会创建名字为name的commons chunk进行合并。

filename：指定commons chunk的文件名。

chunks：指定source chunk，即指定从哪些chunk当中去找公共模块，省略该选项的时候，默认就是entry chunks。

minChunks：既可以是数字，也可以是函数，还可以是Infinity。

数字：模块被多少个chunk公共引用才被抽取出来成为commons chunk。

函数：接受 (module, count) 两个参数，返回一个布尔值，你可以在函数内进行你规定好的逻辑来决定某个模块是否提取成为commons chunk。

Infinity：只有当入口文件（entry chunks） >= 3 才生效，用来在第三方库中分离自定义的公共模块。

src下代码全部移到了src/pages/<设备名称>下面，所以如果使用了相对路径，则不会有问题。
但是如果使用了路径别名“@”（代表src），则会受到影响。建议把用到“@”的地方更换为相对路径。