首页 > Web开发 > 详细

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

时间:2017-06-12 16:48:29      阅读:433      评论:0      收藏:0      [点我收藏+]

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插件写入行内模式

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!