基于webpack的PC端和mobile端开发以及生产环境的搭建

我们用webpack做单页面应用开发应该尝试过很多次了，如果在同一个项目需要支持PC端和移动端，做成多页面应用，开发时能根据请求的终端返回不同的内容，应该怎么做呢？以下描述的是我尝试的一种方案，并且以vue-cli 2.x提供的模板为例，访问 Github 可查看本项目源码。

目录架构

因为是PC端和移动端两个模块，所以我们可以在src下拆分为pc和mobile两个目录，分别放两端的代码，再有一个common目录放置常量、数据层、api层等公共资源和可复用代码：

├── build
│ ├── webpack.config.base.js
│ ├── webpack.config.dev.js
│ └── webpack.config.prod.js
├── src
│   ├──common
│   │   ├── assets
│   │   ├── constants
│   │   ├── store
│   │   │  └── index.js
│   │   |── api
│   │   │  └── index.js
│   ├── pc
│   │   |── pages
│   │   │  |── Home.vue
│   │   │  └── About.vue
│   │   |── App.vue
│   │   |── index.html
│   │   └── main.js
│   ├── mobile
│   │   │  |── Home.vue
│   │   │  └── About.vue
│   │   |── App.vue
│   │   |── index.html
│   │   └── main.js

webpack配置

因为有PC端和移动端，所有开发环境下应