4.0.0 • Published 6 years ago
html-webpack-place-assets-plugin v4.0.0
html-webpack-place-assets-plugin
Use with html-webpack-plugin。
Feature 1
Set option entry: 'entry.js' to HtmlWebpackPlugin, HtmlWebpackPlugin will collect all chunks that are the entry's dependence, and inject them into html.
This feature is what the html-webpack-plugin will to do.
Feature 2
Set option inject: false to HtmlWebpackPlugin, then the css or js will inject to the placeholder what you set.
Dependences
html-webpack-place-assets-plugin@4.x:
html-webpack-place-assets-plugin@2.x:
Use and Settings
Add place holders to html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue start test</title>
${require('./partial/tongji.html')}
<!-- html-webpack-plugin-css -->
<style></style>
</head>
<body>
<img src="../asset/image/test.jpg" alt="">
<img src="../asset/image/timg.jpeg" alt="">
<div id="app"></div>
<!-- html-webpack-plugin-script -->
<script></script>
</body>
</html>Set entry: 'entry.js' and inject: false to HtmlWebpackPlugin:
const htmlPlugins = [];
// html files
Object.keys(entries).forEach(key => {
let item = entries[key];
let template = './' + templates[item];
let filename = template.replace(/.*html\/(.*)\.html$/, '$1.html');
htmlPlugins.push(
new HtmlWebpackPlugin({
template: template,
filename: filename,
// entry
entry: item,
// inject
inject: false
})
);
});Use this plugin:
{
plugins: [
new HtmlWebpackPlaceAssetsPlugin({
// HtmlWebpackPlugin's head tag
headReplaceExp: /<!-- html-webpack-plugin-css -->/,
// HtmlWebpackPlugin's body tag
bodyReplaceExp: /<!-- html-webpack-plugin-script -->/,
// beauty
tagsJoin: '\n ',
})
].concat(
htmlPlugins
)
}