html-webpack-plugin插件使用
项目使用hightopo框架,使用webpack打包。这里的场景是:点击预览按钮,页面会打开一个新页面。
但是由于使用了webpack打包,所以直接使用以下代码是不行的。报404
window.open('test.html')
解决方案:
使用webpack插件 html-webpack-plugin
写入多个页面的配置
此时可以实现,点击 预览 按钮时,打开新的页面。
这里的title参数需要实现的话,需要在111.html中添加 `<title><%= htmlWebpackPlugin.options.title %></title> `
这里需要注意一点:这里的loader需要注释不能使用
如果遇到必须html-loader 和 htmlWebpackPlugin同时使用的情况,需要多看看文档再找解决办法。
html-webpack-plugin插件使用的更多相关文章
- 简单webpack plugin 开发
重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...
- webpack(9)plugin插件功能的使用
plugin 插件是 webpack 的支柱功能.webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事. 常用的插件 ...
- 如何开发webpack plugin
继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...
- 如何编写一个WebPack的插件原理及实践
_ 阅读目录 一:webpack插件的基本原理 二:理解 Compiler对象 和 Compilation 对象 三:插件中常用的API 四:编写插件实战 回到顶部 一:webpack插件的基本原理 ...
- 案例实战之如何写一个webpack plugin
案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructo ...
- 揭秘webpack plugin
前言 Plugin(插件) 是 webpack 生态的的一个关键部分.它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程.这篇文章将尝试探索 webpack plu ...
- YYDS: Webpack Plugin开发
目录 导读 一.cdn常规使用 二.开发一个webpack plugin 三.cdn优化插件实现 1.创建一个具名 JavaScript 函数(使用ES6的class实现) 2.在它的原型上定义 ap ...
- Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告
最近在做基于jenkins ant junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...
- AS Gradle构建工具与Android plugin插件【大全】
Android plugin version 与 gradle version 的关系 Gradle是一种构建工具,它通过编写一个名为build.gradle的脚本文件对项目进行设置,再根据这个脚本对 ...
- idea使用破解版mybatis plugin插件失败,idea打不开的解决方案
记一次错误解决方案 打开 idea.vmoptions (Help -> Edit Custom VM Options...) ,在这里进行了修改 加了破解jar包的路径,但是之前的路径中有中文 ...
随机推荐
- Peer-to-Peer (P2P) communication across middleboxes
Internet Draft B. FordDocument: draft-ford-midcom- ...
- thinkphp5图片上传接口
public function avatarUpload() { $file = request()->file('file'); $filePath = 'avatar'; $width = ...
- Ubuntu系统查看显卡型号和NVIDIA驱动版本
查看GPU型号 lspci | grep -i nvidia 查看NVIDIA驱动版本 sudo dpkg --list | grep nvidia-*
- day11.装饰器初识
1.开放封闭原则 原则: 开放封闭原则,对扩展是开放的,对修改是封闭的. 封版概念:当写好一个功能以后,就不可以再修改此函数,避免下面一系列的调用产生错误. 因此产生了装饰器 2.装饰器形成过程 我们 ...
- 美团小程序框架mpvue蹲坑指南
美团小程序框架mpvue(花名:没朋友)蹲坑指南 第一次接触小程序大概是17年初,当时小程序刚刚内侧,当时就被各种限制折腾的死去活来的,单向绑定, 没有promise,请求数限制,包大小限制,各种反人 ...
- Eclipse导入maven项目时,pom-xml文件报错处理方法
报错如下: Cannot read lifecycle mapping metadata for artifact org.apache.maven.plugins 解决方法: 出现该错误是因为jar ...
- Telephone Lines [POJ3662] [二分答案]
Description Farmer John打算将电话线引到自己的农场,但电信公司并不打算为他提供免费服务.于是,FJ必须为此向电信公司支付一定的费用. FJ的农场周围分布着N(1 <= N ...
- Laravel使用redis保存SESSION
Laravel使用redis保存SESSION 首先确认服务器已经安装redis服务,php安装了redis扩展. 1.打开config/database.php.在redis配置项中增加sessio ...
- ECMA Script 6_行为重定义 Proxy
行为重定义 Proxy 在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截 因此提供了一种机制,可以对外界的访问进行过滤和改写 Proxy 这个词的原意是代理,用在这里表示由它来 ...
- 银行卡号正则,jq 正则,php正则
1 jq正则 /** *银行号码正则 */ function luhmCheck(bankno){ var lastNum=bankno.substr(bankno.length-1,1);//取出最 ...