项目使用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. PHP 闭包函数

    PHP>v5.3闭包函数,闭包函数没有函数名称,直接在function()传入变量即可 使用时将定义的变量当作函数来处理 匿名函数也叫闭包函数(closures允许创建一个没有指定没成的函数,最 ...

  2. Ubuntu+IntelliJ IDEA+Android 配置NDK环境+openCV

    最近需要将Python人证对比模型移植安卓端.安卓端需要使用openCV简单的人像提取处理.在配置openCV前首先需要配置NDK环境. NDK的介绍(http://www.cnblogs.com/l ...

  3. Swagger-概述

    前言 Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件.本文简单介绍了在项目中集成swagger的方法和一些常见问题.如果想深入分析项目源码,了解更多内容,见参考资料. S ...

  4. aop切入mapper接口

    ***************************************分割线****************************************************** 参考: ...

  5. 网络编程-Python高级语法-GIL全局解释器锁

    知识点:GIL全局解释器锁其实和Python没有任何关系,是由于当初编写Python解释器时留下的,它只对多线程有影响,GIL保证同一时刻只有一个线程在运行,即使是多核配置电脑,同一时刻也只会让一个线 ...

  6. Hexo主题yilia增加gitalk评论插件

    虽然gitment可以实现评论功能,但是适配方面做的并不好,这里借用GitHub上的gitalk项目用来优化个人博客的评论功能 下面记录自己从gitment到gitalk的替换过程: 1.在layou ...

  7. 阿里云负载均衡SSL证书配置(更新)

    阿里云负载均衡及应用防火墙SSL证书配置 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/8908461.html 好久了呢,距上篇博客的这段时间中:考试.搬家.工 ...

  8. 错误解决记录-------------验证启动HDFS时遇到的错误

    主要解决验证启动HDFS时: 1) jps:bash: jps: command not found... 原因:主要是java/bin 环境变量没配置好. 解决办法: 在  ~/.bash_prof ...

  9. django——视图层

    1. 视图函数 一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片. ...

  10. XVII Open Cup named after E.V. Pankratiev. Eastern GP, Division 1

    A. Count The Ones $ans=b-c+1$. #include <stdio.h> using namespace std ; int a , b , c ; void s ...