项目使用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. Swift - use Array

    //数组声明 var arr0 = Array<Int>() var arr1 = Array<String>(count: 3, repeatedValue: "& ...

  2. SignalR 实时推送消息

    业务场景 以前做过一个东西,就是当数据库有数据更新的时候,能够自动更新到前台,那时候signalr还没出现的时候,需要自己实现轮询读库,对于数据库和程序都是比较郁闷的事情.现在利用SignalR解决数 ...

  3. 安装酷痞到IIS7.x共用80端口Windows(64位)系统下运行多个酷痞

    需求: 1.酷痞直接运行的模式是自宿主运行.由于win系统一般都由iis提供多个网站服务,并首先占用了80端口,如果想酷痞可以直接通过主机头和iis共用80端口会出现这种运行模式的需求. 以下是实现方 ...

  4. Apache访问日志记录用户的每一个请求

    我们使用的是/usr/local/apache2.4/conf/extra/httpd-vhosts.conf配置文件下的第二段配置,它的日志在/usr/local/apache2.4/logs/下面 ...

  5. TestNG 中DataProvider 的用法

    使用DataProvider提供数据有两种形式: 第一种:一种是在测试代码和测试数据放在同一个类中: 第二种:把所有的数据提供都单独写在一个类里面,当测试数据比较多时,这种方法利于维护. DataPr ...

  6. cons-跨域请求

    当一个资源从与该资源本身所在的服务器不同的域或端口不同的域或不同的端口请求一个资源时,资源会发起一个跨域 HTTP 请求. 出于安全考虑,浏览器会限制从脚本内发起的跨域HTTP请求.例如,XMLHtt ...

  7. angularjs 初始化方法执行两次以及url定义错误导致传值错误问题

    1.初始化方法执行两次以上的问题定义一个 route.如下所示:.state('main.channelQryDetail', { url:'/channelDetail/:channelNo/:pa ...

  8. (83)Wangdao.com第十七天_JavaScript 定时器

    JavaScript 提供定时执行代码的功能,叫做 定时器(timer). 主要由 setTimeout() 和 setInterval() 这两个函数来完成.它们向任务队列添加定时任务 setTim ...

  9. webpack打包 基础

    001.什么是webpack? 作用有哪些? WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Ty ...

  10. CodeForces #549 Div.2 D. The Beatles

    题目 解题思路 关键是要 ,找出L 的组合,然后遍历L的组合,用最大公约数就可以算出来当前L的值要停多少次 怎么找出L的组合呢?饭店是每隔K 有一个,是重复的,我们只需要算出第一个饭店两侧,起点和停顿 ...