html-tag-replace-webpack-plugin
v1.0.2
Published
A plugin supports inject into tag due to html-webpack-plugin
Downloads
3
Maintainers
chersquwnReadme
html-tag-replace-webpack-plugin
这是一个在html-webpack-plugin基础上修改的插件，在原来的插件的基础上，添加了css和js资源自定义注入位置的功能。
安装
npm install html-tag-replace-webpack-plugin使用
html模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="keywords" content="" />
<meta http-equiv="description" content="" />
<title>html-replace-webpack-plugin demo</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>webpack.config.js
var HtmlTagReplaceWebpackPlugin = require('html-tag-replace-webpack-plugin')
module.exports = {
...
plugins: [
new HtmlTagReplaceWebpackPlugin({
inject: true,
injectPoint: {
css: ['<!-- inject:css -->', '<!-- endinject -->'],
js: ['<!-- inject:js -->', '<!-- endinject -->']
},
})
]
...
}webpack编译生成的html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="keywords" content="" />
<meta http-equiv="description" content="" />
<title>html-replace-webpack-plugin demo</title>
<!-- inject:css -->
<link href="/static/css/index.css" rel="stylesheet">
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/index.js"></script>
<!-- endinject -->
</body>
</html>API
其他API与html-webpack-plugin相同。
新增的API：
- injectPoint：
- Type:
Array - Value:
[startTag, endTag] - optional，如果不设置此参数，将与html-webpack-plugin功能相同
- Type: