0.1.0 • Published 4 years ago
html-inline-loader v0.1.0
Html template resource inline (?__inline).
Getting Started
To begin, you'll need to install html-inline-loader:
npm install html-inline-loader -DConfig
Add the loader to your webpack config. For example:
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(html|tpl)$/i,
use: [
{
loader: 'html-inline-loader',
},
],
},
],
},
};Usage
link
You can use <link href="(filePath)?__inline"> in a html template, to add extra tags info.
For example:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="./meta.html?__inline">
</head>
</html>meta.html
<meta charset="UTF-8">
<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="美女直播,附近直播,才艺直播,小视频,个人直播,美女视频,在线直播,手机直播">
<meta name="apple-mobile-web-app-capable" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<link rel="dns-prefetch" href="//11.url.cn/">The result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="美女直播,附近直播,才艺直播,小视频,个人直播,美女视频,在线直播,手机直播">
<meta name="apple-mobile-web-app-capable" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<link rel="dns-prefetch" href="//11.url.cn/">
</head>
</html>script
Similarly，you can use <script type="text/javascript" src="(filePath)?__inline"> in a html template, for inline the javascript content in it.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script type="text/javascript" src="../node_modules/amfe-flexible/index.js?__inline"></script>
</body>
</html>The result:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script type="text/javascript">
(function flexible (window, document) {
// ...
}(window, document))
</script>
</body>
</html>key
Sometimes, you might use dynamic values at your html template, then use the @{(key word)}@.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script type="text/javascript" src="bundle.js?v=@{buildTime}@"></script>
</body>
</html>buildTime here as a key that will be inject the value from the html-inline-loader options.
{
loader: 'html-inline-loader',
options: {
buildTime: '2020-06-19'
}
}The result is:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script type="text/javascript" src="bundle.js?v=2020-06-19"></script>
</body>
</html>