file-loader引起的html-webpack-plugin坑
引言
最近,我们的一个后台系统要改版为基于react + redux + react-router + ant-design
技术栈,切换到当下比较新的技术来实现后台系统;在项目实施过程中,选择了基于react的ant-design
组件库,为蚂蚁金服出品。使用该UI组件库,该团队推荐使用其为其配套的内部定制化的构建工具atool-build
。
推荐使用atool-build
工具,因为该工具内部对webpack的一些基本配置内容都做了底层配置,其实atool-build
内部定制化了一些基本的配置;
这样,开发者就不在需要一个一个的来配置这些基本的、一般都会用上的配置项,提升了项目构建效率(当然,也可以不使用其推荐的atool-build
工具,组件来配置webpack基本配置项);话说回来,虽然atool-build
内部定制化了一些基本配置,但是可能不满足开发者的需求,那么我可以在项目根目录中添加webpack.config.js
来覆盖该工具内部的一些不满足要求的定制化配置。
本文所说的坑
就是是atool-build定制化的一个配置引起的,下面就描述一下这个问题。
坑
这个坑是由于atool-build
内部为后缀为.html文件配置了file-loader
导致,具体配置如下:
{ test: /\.html?$/, loader: 'file?name=[name].[ext]' }
这个module配置项的意思大家都清楚,即js或者jsx文件引入的html文件,会被抽取为单独的html文件,相对于webpack中output配置项的path路径,file-loader具体的用法可以参考这里。
于是否,在webpack中配置一下html-webpack-plugin
插件信息,代码如下:
new HtmlWebpackPlugin({
title:'rd平台',
template: 'entries/index.html', // 源模板文件
filename: './index.html', // 输出文件【注意:这里的根路径是module.exports.output.path】
showErrors: true,
inject: 'body',
chunks: ["common",'index']
})
其中,entries/index.html
文件的内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RD工具平台</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
然后在应用的入口的js文件中import ./index.html
,最后使用npm run build
调用atool-build
来构建前端代码,生成的index.html
出现问题,里面的内容变成:
<head>
<link href="index-9b9df6507771a310f270.css" rel="stylesheet">
</head>index.html
<script type="text/javascript" src="common-1442be5d0c23365a109d.js"></script>
<script type="text/javascript" src="index-9b9df6507771a310f270.js"></script>
根据生成的index.html
内容可以看出html-webpack-plugin
没有找到指定的模板文件entries/index.html
,但是目录结构中确实是有这个文件的。
因此在这种情况下,该插件生成的html内容就是在head中插入抽取的css文件,以及在body中插入入口js文件,其html文档内容为指定模板的文件名index.html
;
为啥html-webpack-plugin
会出现找不到指定模板文件的情况,而该文件确实是存在的???
百思不得其解,折腾大半天后发现,原来是内部配置的file-loader
导致的问题;具体原因,笔者猜测:
可能是因为file-loader将导入的index.html文件**移动到**指定输出位置后导致`html-webpack-plugin`找不到原有位置的模板文件,从而生成上述情况的index.html文件内容。
于是否,就想到覆盖atool-build
内置的file-loader
配置,对后缀为.html
的文件修改成使用html-loader
作为loader,在webpack.config.js
中覆盖原有指定配置项具体的代码如下:
if(loader.test.toString() === '/\\.html?$/'){
loader.loader = 'html';
}
然后,在应用的入口js文件中remove掉import './index.html'
,最后使用atool-build编译构建代码后发现,生成的index.html
是期望中的效果。
由此可以说明,file-loader
的使用导致了html-webpack-plugin
出现了问题。
file-loader与html-loader区别
二者作为loader,其区别还是挺明显的。下面就简述一下二者的区别。
file-loader
file-laoder
是对require或者import的指定文件(比如A.html)进行抽取(上面例子中从js中抽取index.html)。
在这一个过程中,抽取文件可以指定具体的目录信息、文件名称、hash信息、后缀信息等等,导入(A.html)的文件在构建编译后不会有该文件A.html的任何痕迹,因为文件被抽取了。
比如,可以将上面index.html文件指定到某个目录下如html目录下,那么file-loader配置中可以这样写:
{ test: /\.html?$/, loader: 'file?name=html/[name].[ext]' }
具体的其他配置参考一下其官网给出的例子:
require("file?name=js/[hash].script.[ext]!./javascript.js");
// => js/0dcbbaa701328a3c262cfd45869e351f.script.js
require("file?name=html-[hash:6].html!./page.html");
// => html-109fa8.html
require("file?name=[hash]!./flash.txt");
// => c31e9820c001c9c4a86bce33ce43b679
require("file?name=[sha512:hash:base64:7].[ext]!./image.png");
// => gdyb21L.png
// use sha512 hash instead of md5 and with only 7 chars of base64
require("file?name=img-[sha512:hash:base64:7].[ext]!./image.jpg");
// => img-VqzT5ZC.jpg
// use custom name, sha512 hash instead of md5 and with only 7 chars of base64
require("file?name=picture.png!./myself.png");
// => picture.png
require("file?name=[path][name].[ext]?[hash]!./dir/file.png")
// => dir/file.png?e43b20c069c4a01867c31e98cbce33c9
html-loader
html-loader
是将require或者import的html文件转换为html字符串并导出。
在这一过程中,在导出HTML字符串之前,会将html内容中指定元素的一些属性按照attrs=<tag>:<attribute>
形式进行更改,一般是一些外部资源的链接替换,默认attrs=img:src
例如,对上面介绍的index.html增加一个img和一个a元素,其内容入下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RD工具平台</title>
</head>
<body>
<img src="./blue.png"/>
<a href="./blue.png">blue.png</a>
<div id="app"></div>
</body>
</html>
然后对html-loader
的配置项配置html文件中的img的src
属性和a元素的href
属性进行变更,其具体的配置如下
//对图片应用url-loader,其中图片小于100byte会使用base64形式,否则抽取一个图片文件
{ test: /\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/i, loader: 'url?limit=100' }
if(loader.test.toString() === '/\\.html?$/'){
loader.loader = 'html?attrs[]=img:src&attrs[]=a:href'; //配置img的src属性和a的href属性
}
这样配置编译后生成的index.html内容如下:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>RD工具平台</title>
<link href="index-245b9c326ea3ec1b2089.css" rel="stylesheet">
</head>
<body> <img src=fd0ae22733627f001267a408ec1581ea.png /> <a href=fd0ae22733627f001267a408ec1581ea.png>blue.png</a>
<div id=app></div>
<script type="text/javascript" src="common-56bf69cceda96b513b37.js"></script>
<script type="text/javascript" src="index-245b9c326ea3ec1b2089.js"></script>
</body>
</html>
另外,注意一点:
与file-loader不同的是,html-loader会将导入的html内容字符串作为js中一个模块而存在,模块内容挂在module.exports下面。
例如在index.js
文件中import './index.html'
后,经编译后index.js
中该部分的代码如下:
/* 445 */
/***/ function(module, exports, __webpack_require__) {
module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>RD工具平台</title>\n</head>\n<body>\n<img src=\"" + __webpack_require__(249) + "\"/>\n<a href=\"" + __webpack_require__(249) + "\">blue.png</a>\n<div id=\"app\"></div>\n</body>\n</html>\n";
/***/ },
/* 446 */
由此可以看出:
html-loader将html文件作为js的一个模块,模块向外提供编译后的html文件内容字符串,其实可以将其看成一个输出字符串的模块而已。
html中的外部链接,如上面的img的
src
和a的href
在html内容字符串所在的模块内部,其实是通过webpack的require形式来加载的,尽管图片是在html文件中通过img形式引入。如上面代码中的__webpack_require__(249)
,这些require是需要对应的loader来处理的,上面的.png
是用url-loader
来处理的
由于本人知识有限,文章有什么不正确的地方,请各位批评指正,谢谢!!!
file-loader引起的html-webpack-plugin坑的更多相关文章
- webpack入坑之旅(二)loader入门
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- vue+ vue-router + webpack 踩坑之旅
说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案 老司机可以忽略下面的内容了 1)起因 考虑到数据分离的问题 因为server是express搭的 自然少 ...
- 如何开发webpack plugin
继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...
- 简单webpack plugin 开发
重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...
- 揭秘webpack plugin
前言 Plugin(插件) 是 webpack 生态的的一个关键部分.它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程.这篇文章将尝试探索 webpack plu ...
- webpack入坑之旅(六)配合vue-router实现SPA
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅(四)扬帆起航
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅(三)webpack.config入门
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅(一)不是开始的开始
最近学习框架,选择了vue,然后接触到了vue中的单文件组件,官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件,于是就开始了webpack的入坑之旅.因为原来没有用过 ...
随机推荐
- 软件测试基础Ⅲ(osi7层协议,测试模型,LoadRunner组件,软件质量模型)
osi7层开放式系统互连网络模型 1.物理层:主要定义物理设备标准,如网线的接口类型.光纤的接口类型.各种传输介质的传输速率等.它的主要作用是传输比特流(就是由1.0转化为电流强弱来进行传输,到达目的 ...
- firefox 之 event兼容写法
event 在 IE 和 FF(Firefox) 中是不兼容的,IE 中可以直接使用 event 对象,而 FF 中则不可以,解决方法之一如下: var event = window.event || ...
- oracle导出expdp导入impdp
conn sys/password as sysdba;创建用户test1CREATE USER test1 IDENTIFIED BY "pass1";GRANT CONNECT ...
- swift -inout关键字
一般参数仅仅是在函数内可以改变的,当这个函数执行完后变量就会被销毁,不会有机会改变函数以外的变量,那么我们就会产生一个疑问,我们可不可以通过一个函数改变函数外面变量的值呢?答案是肯定的,这时我们就需要 ...
- SimpleDateFormat转换时间,12,24时间格式[转]
SimpleDateFormat转换时间,12,24时间格式 来自:http://blog.csdn.net/dongguang1082/article/details/4387165 在使用Simp ...
- openstack路由管理命令
1.命令一览 [root@cc07 ~]# neutron help | grep route bgp-speaker-advertiseroute-list List routes advertis ...
- MFC单文档带窗体创建
我用的vs05.先随便起个名字qwerty. 确定以后在左边最下面有一个生成的类,点击生成的类,把基类改成CFormView 最后点击完成就创建好了. 单文档的窗口不是后来创建后插入的,是在创建后就自 ...
- gj12-2 协程和异步io
12.3 epoll+回调+事件循环方式url import socket from urllib.parse import urlparse # 使用非阻塞io完成http请求 def get_ur ...
- textInput事件
DOM3级事件引入了 textInput 这个代替keypress的textInput的行为稍有不同 区别 只要可以获得焦点的元素都有keypress事件,但是textInput事件只有文本编辑区域才 ...
- MongoDB常用命令总结
查看数据库 show dbs; 选择某个库 use db; 查看库下的表(暂且说成是表,mongodb中称表问文档) show collections; 插入数据 db.table.insert( { ...