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

最新推荐文章于 2024-06-15 12:23:02 发布

weixin_30823001

最新推荐文章于 2024-06-15 12:23:02 发布

阅读量99

点赞数

文章标签： webpack ViewUI

原文链接：http://www.cnblogs.com/hudeam/p/6993726.html

版权

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

转载于:https://www.cnblogs.com/hudeam/p/6993726.html

weixin_30823001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack html-webpack-plugin插件写入行内模式

html模板<!doctype html><html><head> <meta charset="UTF-8">  <title><%= htmlWebpackPlugin.options.title %></title>...
复制链接

扫一扫