首页 > 代码库 > webpack html-webpack-plugin插件写入行内模式

webpack html-webpack-plugin插件写入行内模式

2024-10-05 01:04:01   215人阅读

html模板

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 写入title -->
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 写入公用JS -->
    <script>
        <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry].source() %>
    </script>
</head>
<body>
    <!-- 非公用JS写入 -->
    <% for (var k in htmlWebpackPlugin.files.chunks) { %>
        <% if(k !== ‘main‘) { %>
            <script src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>
        <% }%>
    <% } %>
</body>
</html>

 

<%= coding %>这个为 htmlWebpackPlugin 官方支持的模板语言

 

JS模板

var htmlWebpackPlugin = require(‘html-webpack-plugin‘);
const path = require(‘path‘);
module.exports = {
    entry: {
        a: ‘./src/js/a.js‘,
        b: ‘./src/js/b.js‘,
        main: ‘./src/js/main.js‘
    },
    output: {
        path: path.resolve(__dirname, ‘dist‘),
        filename: ‘js/[name].bundle.js‘
    },
    plugins: [
        new htmlWebpackPlugin({
            title: "我就是标题1", //HTML文档的标题。
            filename: "a.html", // 生成的模板文件的名字
            template: "index.html", //模板来源文件
            inject: false, //不注入，在html模板写入
            chunks: [‘main‘,‘a‘] //引入的模块
        }),
        new htmlWebpackPlugin({
            title: "我就是标题2",
            filename: "b.html",
            template: "index.html",
            inject: false,
            chunks: [‘main‘,‘b‘]
        })
    ]
};

 

多页面时，只要new htmlWebpackPlugin() 就可以。

html-webpack-plugin参数详解

webpack html-webpack-plugin插件写入行内模式


联系
我们