1.0.4 • Published 7 years ago
html-yu-plugin v1.0.4
html-yu-plugin ===================
Inspired by HTML-webpack-plugin
This is a plugin for webpack based on HTML-webpack-plugin,which will enable you to inject js both head and body individually
And what is more,to meet the need of our project, I provide blockFile and headBlockFile option,which can directly inject some html code blocks after the start body tag and before the closing body tag
And this plugin can also alter the relative url in index.html with specified url
Installation
Install the plugin with npm:
$ npm install html-yu-plugin --save-devBasic Usage
The plugin will generate an HTML5 file for you that includes all your webpack
bundles in the body using script tags. Just add the plugin to your webpack
config as follows:
var HtmlWebpackPlugin = require('html-yu-plugin')
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
filename:'/view/index.html',
template:'src/view/index.html',
inject:true, //this value must be true
heads:['response'], //place the js which wanna be placed inside head tag
blockFile:"src/view/statistics.html", //this file's code will be injected within the body tag;
headBlockFile:"src/view/loading.html", //prepend to the body
replaceUrl:"http://news.sohu.com/upload/yursile/smg/" //replace "" with the specified url in index.html
})
]
}This will generate a file index.html like the following:
<!DOCTYPE html>
<html>
<head>
<script src="http://news.sohu.com/upload/yursile/smg/webpack/dist/js/response.js"></script>
</head>
<body>
<!-- the loading block is injected -->
<div class="loading">
<div class="pace"></div>
</div>
<script src="http://news.sohu.com/upload/yursile/smg/webpack/dist/js/main.js"></script>
<!-- here also can be injected with some stuff like statistics -->
<script type="text/javascript">
// such as baidu statistics code;
</script>
</body>
</html>