webpack 构建同时适用于手机和电脑的调试服务器
plugins
plugins: [
new HtmlWebpackPlugin({ // 使用模板同时生成 pc.html和mobile.html
title: 'pc',
filename: 'pc.html',
hash: true,
template: path.resolve(__dirname, '../src/template.html'),
chunks: ['pc'] // 只注入pc.js
}),
new HtmlWebpackPlugin({
title: 'mobile',
hash: true,
filename: 'mobile.html',
template: path.resolve(__dirname, '../src/template.html'),
chunks: ['mobile'] // 只注入mobile.js
}),
]
webpack-dev-server
devServer: {
historyApiFallback: {
rewrites: [
{
from: /.*/, // 让request url 重写,这儿默认是请求html文件会运行to方法。
to(ctx) {
if (isMoble(ctx.request.get('user-agent'))) { // 获取请求客服端信息,如果是mobile,重定向到mobile.html。
console.log('mobile')
return '/mobile.html' // 若为手机端,地址改为mobile.html
} else {
console.log('pc') // 若为pc端,地址改为pc.html
return '/pc.html'
}
}
}
]
},
}
webpack 构建同时适用于手机和电脑的调试服务器的更多相关文章
- 自定义适用于手机和平板电脑的 Dynamics 365(五):可视控件
使用 适用于手机的 Dynamics 365 和平板电脑中的可视控件帮助移动用户更快地输入 Dynamics 365 数据并提供更丰富的可视体验. 此组自定义控件包括滑块.开关.星数评级.视频嵌入以及 ...
- 自定义适用于手机和平板电脑的 Dynamics 365(四):窗体脚本
为 Web 应用程序中使用的窗体编写的脚本也应该适用于用于手机和平板电脑的 Dynamics 365,但存在一些差异. 通常,对于移动应用程序无效的方法不返回错误,但是它们也不返回任何值. 开发人员可 ...
- 自定义适用于手机和平板电脑的 Dynamics 365(三):显示的实体
您可以启用 适用于手机的 Dynamics 365 和 适用于平板电脑的 Dynamics 365 的有限实体集. 若要查看是否启用了实体,或者要启用实体,请单击“设置”>“自定义”>“自 ...
- 自定义适用于手机和平板电脑的 Dynamics 365(二):窗体自定义项
适用于手机的 Dynamics 365 和 适用于平板电脑的 Dynamics 365 使用窗体作为 Web 应用. 窗体在应用程序中的显示方式为移动体验进行了优化. 下图显示了从 Web 应用程序到 ...
- 自定义适用于手机和平板电脑的 Dynamics 365(一):主页
当用户首次打开适用于手机和平板电脑的 Dynamics 365 时,他们将看到默认为“销售仪表板”的主页. 您可以创建新仪表板或 Web 应用程序中编辑现有仪表板,然后为移动设备启用它们,用户可以选择 ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- webpack构建具备版本管理能力的项目
webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js.css.image.font.html,以及各种预编译语言都不在话 ...
- 深入浅出的webpack构建工具---webpack基本配置(一)
深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...
- 用gulp+webpack构建多页应用——记一次Node多页应用的构建过程
通过参考网上的一些构建方法,当然也在开发过程中进行了一番实践,最终搭建了一套适用于当前多页应用的构建方案,当然该方案还处于draft版本,会在后续的演进过程中不断的优化. 个人觉得该方案的演进过程相对 ...
随机推荐
- Android自动化框架 模拟操作 模拟测试
转自:http://bbs2.c114.net/home.php?mod=space&uid=1025779&do=blog&id=5322 几种常见的Android自动化测试 ...
- eclipse使用git提交项目
eclipse使用git提交项目有2种方式:一种是git命令窗口,另一种是eclipse自带git插件(跟svn插件一样使用) 一.使用git命令窗口提交项目 1.首先官网下载git并安装,然后配置用 ...
- Network Emulator Toolkit (NEWT) 网络限速工具 (手机和电脑方面)
下载地址: https://blog.mrpol.nl/2010/01/14/network-emulator-toolkit/ 参考博客: http://blog.csdn.net/lluozh20 ...
- press_keycode API 参数查询
用法 driver.press_ keycode(‘4’) 参数查找url:https://www.cnblogs.com/larack/p/4223465.html
- Linux-mail设置
邮箱文件设置 #配置发邮件 /etc/mail.rc中追加 set bsdcompat set from=c4kaichen@163.com .com set smtp-auth-user=c4kai ...
- sklearn中的metrics模块中的Classification metrics
metrics是sklearn用来做模型评估的重要模块,提供了各种评估度量,现在自己整理如下: 一.通用的用法:Common cases: predefined values 1.1 sklearn官 ...
- Spark分析之MemoryStore
private case class MemoryEntry(value: Any, size: Long, deserialized: Boolean) class MemoryStore(bloc ...
- Mac上如何用命令修改文件内容
首先打开iTerm,切到文件所在的文件夹目录下 cd xx 然后进入编辑模式 vim xx.xx 然后插入修改 shift + i 修改之后退出插入模式 esc 保存退出 shift + : wq
- (10/24) 图片跳坑大战--处理html中的图片
补充,在前面的服务启动执行命令中,我们在package.json中的配置信息为: "scripts": { "server": "webpack-de ...
- Genymotion——VirtualBox cannot start virtual device
提示"VirtualBox cannot start virtual device" 打开VirtualBox,想要在里面直接启动Genymotion模拟器,又出现错误,提示“Un ...