码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-06-12 17:08:23      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:try   index   源文件   ack   doc   文档   ports   back   span   

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

标签:try   index   源文件   ack   doc   文档   ports   back   span   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!