zoukankan      html  css  js  c++  java
  • webpack html-webpack-plugin插件写入行内模式

    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参数详解

  • 相关阅读:
    tomcat并发个题-未解决
    tengine安装
    nginx获得自定义参数
    nginx限流
    树形背包——hdu1561
    树形dp专题
    单调队列——P1725 琪露诺
    单调队列,dp——POJ
    记忆化搜索——HDU
    区间dp——POJ
  • 原文地址:https://www.cnblogs.com/hudeam/p/6993726.html
Copyright © 2011-2022 走看看