项目使用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插件使用的更多相关文章

  1. 简单webpack plugin 开发

    重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...

  2. webpack(9)plugin插件功能的使用

    plugin 插件是 webpack 的支柱功能.webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事. 常用的插件 ...

  3. 如何开发webpack plugin

    继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...

  4. 如何编写一个WebPack的插件原理及实践

    _ 阅读目录 一:webpack插件的基本原理 二:理解 Compiler对象 和 Compilation 对象 三:插件中常用的API 四:编写插件实战 回到顶部 一:webpack插件的基本原理 ...

  5. 案例实战之如何写一个webpack plugin

    案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructo ...

  6. 揭秘webpack plugin

    前言 Plugin(插件) 是 webpack 生态的的一个关键部分.它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程.这篇文章将尝试探索 webpack plu ...

  7. YYDS: Webpack Plugin开发

    目录 导读 一.cdn常规使用 二.开发一个webpack plugin 三.cdn优化插件实现 1.创建一个具名 JavaScript 函数(使用ES6的class实现) 2.在它的原型上定义 ap ...

  8. Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告

    最近在做基于jenkins ant  junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...

  9. AS Gradle构建工具与Android plugin插件【大全】

    Android plugin version 与 gradle version 的关系 Gradle是一种构建工具,它通过编写一个名为build.gradle的脚本文件对项目进行设置,再根据这个脚本对 ...

  10. idea使用破解版mybatis plugin插件失败,idea打不开的解决方案

    记一次错误解决方案 打开 idea.vmoptions (Help -> Edit Custom VM Options...) ,在这里进行了修改 加了破解jar包的路径,但是之前的路径中有中文 ...

随机推荐

  1. 会话技术、Cookie技术与Session技术

    一.会话技术  1. 存储客户端状态 会话技术是帮助服务器记住客户端状态(区分客户端)的.  2. 会话技术 从打开一个浏览器访问某个站点,到关闭这个浏览器的整个过程,称为一次会话.会话技术就是记录这 ...

  2. 【原创】C# war3 巨魔精灵 minimap

    弃坑LOL后,无聊的时候玩玩 war3的RPG地图,巨魔与精灵.  玩了一段时间精灵....然后玩魔结果总是找不到人.所以就有了这个想法. 代码纯粹靠搬运. 说下原理,网上有份代码,可以查看当前选中目 ...

  3. 深入理解Java虚拟机阅读心得(二)

    垃圾收集 程序计数器.虚拟机栈.本地方法栈三个区域随线程而生,随线程而灭:这几个区域的内存分配和回收都具备稳定性,不需要过多的考虑回收的问题.而Java堆和方法区则不一样. Java堆中存储了几乎所有 ...

  4. C#订阅与发布标准实现

    大概看了下C#官方提供的IObservable接口以及IObserver接口来实现发布和订阅,写的很标准,很有代表性,做下笔记,以后要是项目需要用到发布订阅再基于自己的需求改: public clas ...

  5. __x__(35)0908第五天__ 层级 z-index

    如果三个 div 全部设置 position: absolute; 绝对定位,且未设置 z-index,  则从代码结构上    下面的元素 会盖住 上面的元素. z-index 层级: 通过 z-i ...

  6. __http原理__01__通信流程_消息格式

    本文转自  菜鸟教程  一.HTTP协议(HyperText Transfer Protocol,超文本传输协议) 是因特网上应用最为广泛的一种网络传输协议, 是用于从万维网(WWW:World Wi ...

  7. __http原理__02__HTTP请求方法

    一.HTTP请求方法 根据HTTP标准,HTTP请求可以使用多种请求方法. HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP1.1新增了五种请求方法:OPTIONS ...

  8. swust oj 983

    利用二叉树中序及后序遍历确定该二叉树的先序序列 1000(ms) 10000(kb) 2606 / 4908 已知二叉树的中序和先序遍历可以唯一确定后序遍历.已知中序和后序遍历可以唯一确定先序遍历,但 ...

  9. JavaScript基础知识(Date 的方法)

    Date 的方法 console.log(typeof Date);// "function" Date的实例 console.log(typeof new Date()); // ...

  10. Selenium 3----获取断言信息

    断言:把实际结果与预期进行比较. 一般可以通过获取title .URL和text等信息进行断言. title:用于获得当前页面的标题. current_url:用户获得当前页面的URL. text:获 ...