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 (isMobileUserAgent()) {
     if (!/h5.html/.test(location.href)) {//移动端时，我们跳转到h5的html
       window.location.href = window.location.origin + '/h5.html'
     }
   }
   function isMobileUserAgent() {// 判断是pc端还是h5端
     return /iphone|ipod|android|windows.*phone|blackberry.*mobile/i.test(
       window.navigator.userAgent.toLowerCase()
     );
   }
 }()

我们在下面在写个判断pc和手机的自执行函数，让它给咱们来切，当然为了防止每次刷新都跳首页，我们加个判断，当处于h5端时就不必要再次跳转啦，老哥可以休息啦。

至此我们的两端就搞完了，小伙伴可以自己试试哦，附上demo

通过vue-cli2 创建的完整版，包含完整的router等

相信通过上面的，大家已经会搭建两端，而这次呢，我们就来对vue-cli创建的完整版进行改造。
依然是来个文件目录

小伙伴有木有觉得巨熟悉的感jio，来咱们一起对它进行改造改造，老规矩
入口文件
build文件下，webpack.base.conf.js，老哥躲这里呢

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

plugin
同样也是在build文件下，webpack.dev.conf.js，它也在这

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

小伙伴别忘了，咱刚刚改的是dev下的plugin，还有个老哥还在躲着呢，不得揪出来

build文件下，webpack.prod.conf.js，这下好了，仨兄弟

new HtmlWebpackPlugin({
   filename: config.build.web,
    template: 'index.html',
    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',
    chunks: ['manifest', 'vendor', 'web']
  }),
  new HtmlWebpackPlugin({
    filename: config.build.h5,
    template: 'index.html',
    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',
    chunks: ['manifest', 'vendor', 'h5']
  })

咱就改改加载的模版和启动后的模版名字就阔以啦，其它保持默认

不知道小伙伴有没有发现，prod的plugin，filename还是变量呀，咱不得改改，是吧，就咱这暴脾气
config文件下，index.js，小老弟还想跑

	web: path.resolve(__dirname, "../dist/index.html"),
  	h5: path.resolve(__dirname, "../dist/h5.html"),

这个文件，咱也改改，不然打包不正确，不能光开发环境跑的贼溜是吧，咱生产也得一致啊。
index.html
偷个懒行不，看看上面的配置，还是自己来吧，多大点事啊

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


!function () {
   if (isMobileUserAgent()) {
     if (!/h5.html/.test(location.href)) {//移动端时，我们跳转到h5的html
       window.location.href = window.location.origin + '/h5.html'
     }
   }
   function isMobileUserAgent() {// 判断是pc端还是h5端
     return /iphone|ipod|android|windows.*phone|blackberry.*mobile/i.test(
       window.navigator.userAgent.toLowerCase()
     );
   }
 }()

通过vue-cli3 创建的完整版，包含完整的router等

vue-cli3 首先需要你安装vue-cli3的脚手架，安装姿势

npm install @vue/cli -g

如果你本身安装了vue-cli2 那么你需要先卸载掉它，卸载的姿势

npm uninstall vue-cli -g

安装完成之后，通过npm --version查看安装的版本
创建项目可以通过vue create 项目名创建，也可以通过vue ui可视化页面进行操作，在此不多说，详细教程可以查看官网。
依然是我们的项目目录

因为vue-cli3使用webpack-chain把webpack的配置写进了代码里，所以我们在项目里是无法找到的，不过通过vue inspect > output.js可以把webpack默认的配置文件导出。这样我们就可以查看了。
还有我们的多页面需要修改webpack，这个时候我们就需要在项目根目录下创建vue.config.js文件，里面写我们需要修改的webpack配置。企鹅写的是这些，同样需要更过配置到官网找就行。

module.exports = {
	// pages 里面存放多页面的配置，为对象形式，key为多页面的入口名称
	pages: {
		web: {
			// 入口文件
			entry: './src/web.js',
			// 模板来源
			template: 'public/index.html',
			// 在 dist/index.html 的输出
			filename: 'index.html',
			title: 'PC',
			// 提取出来的通用 chunk 和 vendor chunk。
			chunks: ['chunk-vendors', 'chunk-common', 'web']
		},
		h5: {
			// 入口文件
			entry: './src/h5.js',
			// 模板来源
			template: 'public/index.html',
			// 在 dist/index.html 的输出
			filename: 'h5.html',
			title: 'H5',
			// 提取出来的通用 chunk 和 vendor chunk。
			chunks: ['chunk-vendors', 'chunk-common', 'h5']
		}
	}
}

剩下的和上面的配置一毛一样，这里就不多写啦。看到这是不是觉得vue-cli3贼好用。项目已经放到了github上面，有需要的可以clone下来。

熟悉的配方，嘿嘿，好了，至此咱的东西算是统统解决了，小伙伴试试呗

额外的东西，接上面的路由配置，路由可以集中一个，也可以单独进行配置，但为了方便嘛，咱还是各用各的，一样写路由，只不过在入口文件哪里引入不同的配置就行，同理，像什么pc端或者h5端所独自使用的插件也是没问题的，这样，公共资源，比如图片啊，封装的方法啊，还有存的信息啥的，都可以共用，比如国际化，pdf文档啥的。如果pc和h5的写法规范，路由保持一致，只需要在index.html那里改造下，就可以保证，pc和h5的无缝切换，pc端login进入h5时时也能对呀login页面，状态信息一样可以共用。