我们用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端和移动端,所有开发环境下应该有两个entry
,分别为src/pc/main.js
和src/mobile/main.js
,参考webpack
文档的多入口配置,所以我们在webpack.config.base.js
可做如下修改:
entry: {app: './src/pc/main.js',mobile: './src/mobile/main.js',},
复制代码
完成以上修改后,我们分别对开发环境和打包环境作配置。
开发环境配置
在这里我们要做的是,可以让webpack
既可以同时根据PC端和mobile端的模版生成对应的html
并注入打包后的js
文件,这个时候我们要借助HtmlWebpackPlugin
这个插件帮我们实现。所以,在webpack.config.dev.js
的plugins
里面,我们作以下配置:
plugins: [// ....// PC端new HtmlWebpackPlugin({filename: 'index.html', // 最后生成的文件名template: 'src/pc/index.html', // 模版htmlchunks: ['manifest', 'vendor', 'app'], // 注入打包后的js文件inject: true,}),// 移动端new HtmlWebpackPlugin({filename: 'index.mobile.html',template:'src/mobile/index.html',chunks: ['manifest', 'vendor', 'mobile'],inject: true,}),// ....],
复制代码
上面的配置要特别说明下的是chunks
字段。webpack经过打包后一般会生成vendor.js
,manifest.js
,app.js
。vendor.js
一般是公共代码,manifest.js
是与webpack
加载代码有关的包。app.js
一般是你写的业务代码,要注意的是,你配置了多少个入口文件,就会生成多少个这样的包,比如我们现在有两个入口文件,分别是app
和mobile
,那么就会生成app.js
和mobile.js
。
上面的配置了两个HtmlWebpackPlugin
,分别代表PC端和移动端的模板,他们chunks
字段也表明了在他们生成的html里分别注入app.js
和mobile.js
。
接下来我们想在开发时,想根据访问的客户端,决定加载的是PC端模版还是mobile端模板。比如在chrome
浏览器直接打开时,我们就加载PC端模版index.html
,如果我们打开了 chrome devtools
,切换到移动端调试工具,那么刷新之后我们加载移动端的模版index.mobile.html
,这个时候我们就可以借助webpack-dev-server
工具了。
我们在webpack环境下开发,都会用到这个工具,无论是vue
的脚手架vue-cli
还是react
的脚手架create-react-app
都自带了这个工具。脚手架就是利用这个工具来启动本地服务的,其实webpack-dev-server
内部使用了一个中间件叫做webpack-dev-middleware
来启动web服务。
只要我们在webpack
中配置devServer
这个属性,就能使用了webpack-dev-server
了。我们作如下配置(如果是vue-cli
创建的项目,则在config/index.js
里作相应配置):
devServer: {proxy: {'/': {target: 'http://localhost:8080', // 你项目的本地服务地址bypass: function(req, res, proxyOptions) {const userAgent = req.headers['user-agent'];if (req.headers.accept.indexOf('html') !== -1) {// 根据访问终端返回模板if (/mobile/i.test(userAgent) && !/iPad/i.test(userAgent)) {return '/index.mobile.html';}return '/index.html';}},},},}
复制代码
这里我们代理了/
的每个请求,如果用户的请求资源类型不是html
,那么就然后根据用户的user-agent
返回不同的模板。
这里要说一下的是bypass
函数,官方文档介绍如下:
webpack.js.org/configurati…
Sometimes you don't want to proxy everything. It is possible to
bypass
the proxy based on the return value of a function.
In the function you get access to the request, response and proxy options. It must return either false or a path that will be served instead of continuing to proxy the request.
E.g. for a browser request, you want to serve a HTML page, but for an API request you want to proxy it.
这段文字的大意是,有时候对于浏览器的某些请求,你希望提供HTML页面,你可设置bypass
函数,在函数里你可以拿到req
,res
和proxy
的引用, 最后必须返回false
或资源提供的路径,使这个请求不再继续代理请求。
经过上面配置之后,我们的开发就相对方便些了,只要我们在chrome devtools
切换环境并刷新,webpack就会自动返回对应的模板。
注意:如果直接访问http://localhost:8080
是无法按照客户端的user-agent
返回任务东西的(不经过bypass
函数),必须在后面加多一个路径才行,比如http://localhost:8080/path
,这个问题有待解决。
生产环境配置
生产环境要配置的不多,只要配置HtmlWebpackPlugin
就可以了
plugins: [// ....// PC端模版new HtmlWebpackPlugin({filename: path.resolve(__dirname, '../dist/index.html'),template: 'src/pc/index.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true,},chunksSortMode: 'dependency',chunks: ['manifest', 'vendor', 'app'],}),// 移动端模版new HtmlWebpackPlugin({filename: path.resolve(__dirname, '../dist/mobile_index.html'),template: 'src/mobile/index.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true,},chunksSortMode: 'dependency',chunks: ['manifest', 'vendor', 'mobile'],}),// ....],
复制代码
经过配置就会生成文件了,但是有一个问题是,vendor.js
会包含PC端和移动端的代码,可能有一些代码其中由一方是用不上的,比如UI
框架,我的解决办法是在模版手动注入vue/react
包和对应的UI
框架,这种方法还有一个好处是减少vendor
包的大小。。。
最后再贴一下项目 github 地址,欢迎star~
本文链接:www.zzfweb.cn/post/webpac…