webpack多页面教你轻松打造一个vue项目同时跑出pc端和h5端

    最近做了一个官网项目，有pc和h5两端，想着又要新开两个项目，一个放pc，一个放h5，然后发布的时候又要分开，不由得头大，忽然想起webpack不是有多页面嘛，干嘛不一个项目一个pc端页面，一个h5端页面，然后像图片资源、公共方法、请求api等等之类的不就可以共用了嘛，发布的时候也只需要打包一个就可以啦，结果也附和预期，闲话少说，上代码

webpack手动版

    这个版本基本和vue-cli创建的simple版本相似，所以参考simple吧（偷个懒）。

通过vue-cli 创建的simple版本

    先来个文件目录

因为我们是pc和h5的，所以为了方便，我们建好pc和h5的入口文件，以及各自的依赖模版，因为笔者自己这个是没有router的，组件跳转都是用了swiper，来模拟的一个轮播效果，所以router文件没有，下一篇会用到，vuex也是利用了vue.observable来简单实现的，所以整个项目的体量非常小

自己手动撸也是要建立个webapck.config.js，然后就是多页面的建立，这里我们稍微改造下
入口文件

entry:{
   
    web:'./src/index-web.js', //pc端的入口文件
    h5:'./src/index-h5.js' //h5端的入口文件
 }

然后是plugin

plugins:[
	//pc端采用的模版，然后命名为index.html
    new HtmlPlugin({
   
        template:'./index.html',
        filename:'index.html',
        chunks:['web']
    }),
    //h5端采用的模版，然后命名为h5.html
    new HtmlPlugin({
   
      template:'./index.html',
      filename:'h5.html',
      chunks:['h5']
  })
 ]

chunks多页面时采用，为指定的文件加载对应的js，我们保证一一对应就行，
至于其它的配置，我们保持默认就可以啦，现在我们的两个端页面就可以跑起来啦，但是又有个疑问，我怎么进h5端呢，还有pc端采用的是px，h5端使用的是rem，这怎么搞？别急，咱一步步来，看到我们配置的plugin采用的都是index.html木，我们只需要在哪里进行配置下就行啦，当然也可以指定两个模版，不过，一个就够了噻能偷懒还是偷个懒吧（嘿嘿.jpg）
index.html

@media screen and (max-width:480px) {
   
   html {
   
     font-size: 625%;
   }
 }

当当当 媒体查询老哥出场了，我们在这限制下，小于480的屏我们都采用1rem = 100px，这样h5端就可以使用rem进行布局，pc端依然可以使用px啦
我们想访问h5端，只需要在根路由下加个h5.html就可以啦，举个栗子，pc端是127.0.0.1:8080/#/，那么h5端就是127.0.0.1:8080/h5.html/#/，但是我们总不能让用户自己输入吧，so

!function () {
   
   if