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

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

目录架构

因为是PC端和移动端两个模块,所以我们可以在src下拆分为pcmobile两个目录,分别放两端的代码,再有一个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.jssrc/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.jsplugins里面,我们作以下配置:

  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.jsvendor.js一般是公共代码,manifest.js是与webpack加载代码有关的包。app.js一般是你写的业务代码,要注意的是,你配置了多少个入口文件,就会生成多少个这样的包,比如我们现在有两个入口文件,分别是appmobile,那么就会生成app.jsmobile.js

上面的配置了两个HtmlWebpackPlugin,分别代表PC端和移动端的模板,他们chunks字段也表明了在他们生成的html里分别注入app.jsmobile.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函数,在函数里你可以拿到reqresproxy的引用, 最后必须返回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…

转载于:https://juejin.im/post/5c0fbcd8f265da611036e669

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/252824.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习简介(一)——卷积神经网络

本文的主要目的,是简单介绍时下流行的深度学习算法的基础知识,本人也看过许多其他教程,感觉其中大部分讲的还是太过深奥,于是便有了写一篇科普文的想法。博主也是现学现卖,文中如有不当之处,请各位指出&…

node+mongoose使用例子

https://github.com/Aquarius1993/nodeNotes 功能 1. 注册 2. 登录 3. 修改密码 4. 修改头像 5. 获取用户笔记 6. 添加,删除,更新笔记安装部署 1. 安装 Node.js MongoDB 2. npm install 3. 启动 MongoDB 4. npm start 5. visit http://localhost:8899 https://git…

FastJson的常用操作

转载:https://www.cnblogs.com/Ming8006/p/6944954.html 常用操作包括以下内容: 对象与(JsonObject或JsonArray)与String的互换String转换为(JsonObject或JsonArray)如何保持顺序Eval的使用值为null的&…

Jenkins持续集成 之 Jenkins安装

一、安装JDK与TOMCAT8 参考地址: http://ibm.chick.blog.163.com/blog/static/144201610201652811537410/ 二、下载Jenkins安装包 wget http://mirrors.jenkins.io/war/latest/jenkins.war 三、把jenkins.war放到TOMCAT下的webapps 四、启动tomcat并访问 http://10.…

夜视模式,多少猥琐相机假汝之名

一般相机加装一个红外滤光片,就是一个可以用来干猥琐事情的相机了。现在有相机直接把这个功能整合了,它的这个功能叫红外夜视模式,可以拍下黑暗中的物体,当然,也可以透视纺织品和一些其他材质的衣物。这部相机具有500万…

vue-router.esm.js?fe87:16 [vue-router] Route with name 'page' does not exist

本文地址&#xff1a;http://www.cnblogs.com/veinyin/p/7910525.html 我的路由配置 1 { 2 path: /page, 3 name: page, 4 component: page 5 } 我的 router-link <router-link :to"{name:page,params:{trans:ahahahaha}}">page</route…

Java中设计模式之单例设计模式-1

单例作用 1 节省内存2 可以避免多种状态导致状态冲突单例的创建步骤 1 私有化构造方法2 私有化声明的属性3 getInstance4 方法需要静态单例分类 1.懒汉式 2.饿汉式 两种单例区别&#xff1a; 饿汉式 线程安全的 懒汉式 线程不安全的 饿汉式&#xff1a; package 设计模式之单…

Vue 父子组件间的通信

前言 在 Vue 项目中父子组件的通信是非常常见的&#xff0c;最近做项目的时候发现对这方面的知识还不怎么熟练&#xff0c;在这边做一下笔记&#xff0c;系统学习一下吧。 1 父组件传值给子组件 1.1 传值写法 父组件传值给子组件&#xff0c;这个就比较常见了&#xff0c;直接用…

夜视仪

国民兵所用F-16的驾驶舱&#xff0c;机员配有夜视镜以备观察领空的客机或飞行物体使用夜视镜时看到的影像夜视仪〈night vision device&#xff0c;简称NVD〉&#xff0c;也称夜视镜&#xff0c;是透过光学科技强化黑暗中光源的科技装置&#xff0c;通常用于军事用途。目前在民…

【物理/数学】—— 概念的理解 moment、momentum

moment&#xff1a;矩&#xff0c;momentum&#xff1a;[物] 动量&#xff1b;动力&#xff1b;冲力&#xff1b; 数学意义上的 moment&#xff08;矩&#xff09;概念其实源自于物理范畴。首先我们来介绍物理学意义上的矩&#xff08;Momentum&#xff09;的概念。 1. 物理学意…

JAVA多线程实现的三种方式

JAVA多线程实现方式主要有三种&#xff1a;继承Thread类、实现Runnable接口、使用ExecutorService、Callable、Future实现有返回结果的多线程。 其中前两种方式线程执行完后都没有返回值&#xff0c;只有最后一种是带返回值的。 前两种省略&#xff0c;着重看看第三种&#xff…

2springboot:快速创建springboot项目

使用IDEA快速创建springboot项目流程&#xff1a; 创建新的项目选择 项目的命名以及包名 需要什么包就导入什么包 进行测试的单元 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId>&…

如何做好渠道销售?

作者&#xff1a;路人李志强链接&#xff1a;https://www.zhihu.com/question/19689177/answer/28508799来源&#xff1a;知乎著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。作为一名一线品牌的渠道销售&#xff0c;如何让代理商放弃其他小品…

2017浙江省赛 B - Problem Preparation ZOJ - 3959

地址&#xff1a;http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode3959 题目&#xff1a; Its time to prepare the problems for the 14th Zhejiang Provincial Collegiate Programming Contest! Almost all members of Zhejiang University programming conte…

jQuery导入代码片段并绑定事件

a.html <div><button class"button" >点我达</button> </div> b.html <html> <head><script type"text/javascript" src"./js/jquery-1.0.1.js"></script><meta http-equiv"Content-Ty…

验证码识别

基于Keras&#xff0c;识别简单的4位字符的验证码。 https://github.com/ypwhs/captcha_break

LinCode落单的数

easy 落单的数 查看执行结果 60% 通过给出2*n 1 个的数字&#xff0c;除当中一个数字之外其它每一个数字均出现两次。找到这个数字。 您在真实的面试中是否遇到过这个题&#xff1f; Yes例子 给出 [1,2,2,1,3,4,3]。返回 4 挑战 一次遍历&#xff0c;常数级的额外空间复杂度…

汉邦高科范俊峰:关于透雾摄像机那点事

慧聪安防网讯 生活在北方的人们&#xff0c;隔三差五就和雾霾来一次亲密接触&#xff0c;雾霾对人们的出行和交通有很大的影响&#xff0c;雾霾笼罩之下&#xff0c;人们出行如果闯红灯、车辆违规行驶发生交通事故&#xff0c;交通监控摄像头只能“雾里看花”&#xff0c;透雾摄…

SpringBoot注解大全(转)

原文链接&#xff1a;[springBoot系列]--springBoot注解大全 一、注解(annotations)列表 SpringBootApplication&#xff1a;包含了ComponentScan、Configuration和EnableAutoConfiguration注解。其中ComponentScan让spring Boot扫描到Configuration类并把它加入到程序上下文。…

祭奠我的2018

提前写这篇文章&#xff0c;是因为深深的感觉到自己的无能 18年伊始&#xff0c;在浪潮干了大半年的我 还沉醉在深深的满足感中&#xff0c;感觉自己对工作游刃有余 那种自大和自我满足感充斥着我的心态 已经变得不会学习了 后来有一次机遇&#xff0c;让我有了跳出舒适的机会 …