[js高手之路]深刻浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

时间 2019-11-06

标签高手之路深刻 webpack 教程系列插件使用 html plugin 配置栏目 JavaScript 繁體版

原文原文链接

上文咱们讲到了options的配置和获取数据的方式，本文，咱们继续深刻options的配置html

1、html-webpack-plugin插件中的options除了本身定义了一些基本配置外，咱们是能够任意的添加自定义的数据jquery

webpack.dev.config.js文件:webpack

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {git

entry : {
    main : './src/js/main.js',
    calc : './src/js/calc.js'
},
output : {
    //__dirname，就是当前webpack.config.js文件所在的绝对路径
    path : __dirname + '/dist', //输出路径，要用绝对路径
    filename : 'js/[name]-[hash].bundle.js' //打包以后输出的文件名
},
plugins: [
    new HtmlWebpackPlugin({
        template : './index.html',
        title : 'ghostwu教你学webpack',
        inject : true,
        date : new Date(),
        userName : 'ghostwu',
        age : 22
    })
]

};github

咱们在webpack.dev.config.js中新增了3个自定义数据( date,userName, age)，咱们在demo2目录下面的index.html模板中能够这样读取web

1 <h3><%= htmlWebpackPlugin.options.date %></h3>
2 <h3><%= htmlWebpackPlugin.options.userName %></h3>
3 <h3><%= htmlWebpackPlugin.options.age %></h3>npm

一样设置好了以后，记得( npm run d )从新打包生成.ui

2、完整的把htmlWebpackPlugin这个实例在模板中遍历出来spa

demo2下面的index.html文件:插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
<body>
    <h3><%= htmlWebpackPlugin.options.date %></h3>
    <h3><%= htmlWebpackPlugin.options.userName %></h3>
    <h3><%= htmlWebpackPlugin.options.age %></h3>
    <ul>
        <% for ( var key in htmlWebpackPlugin ){ %>
            <% if ( key == 'files' ) { %>
                <h3>files</h3>
                <% for( var f in htmlWebpackPlugin[key] ){ %>
                    <li> <%= f %>, <%= htmlWebpackPlugin[key][f] %> </li>
                    <% if ( f == 'chunks') { %>
                        <p><%= JSON.stringify( htmlWebpackPlugin[key][f] ) %></p>
                    <% } %>
                <% } %>
            <% } else { %>
                <h3>options</h3>
                <% for( var f in htmlWebpackPlugin[key] ){ %>
                    <li> <%= f %>, <%= htmlWebpackPlugin[key][f] %> </li>
                <% } %>
            <% } %>
        <% } %>
    </ul>
</body>
</html>

三，经过上面打印的数据，咱们能够本身手动指定js文件的引入，不须要自动inject

webpack.dev.config.js文件

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry : {
        main : './src/js/main.js',
        calc : './src/js/calc.js'
    },
    output : {
        //__dirname，就是当前webpack.config.js文件所在的绝对路径
        path : __dirname + '/dist', //输出路径，要用绝对路径
        filename : 'js/[name]-[hash].bundle.js' //打包以后输出的文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template : './index.html',
            title : 'ghostwu教你学webpack',
            inject : false
        })
    ]
};

inject设置为false, js不会自动注入到打包以后的文件dist/index.html，因此咱们就要自动指定加载的js文件.

demo2/index.html文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
<body>
    <script src="<%= htmlWebpackPlugin.files.chunks.calc.entry %>"></script>
</body>
</html>

执行打包命令( npm run d ),在dist目录下生成的index.html文件，源代码就变成咱们手动注入的js文件了

4、minify选项，压缩html文件

他能够配置不少的值，官方参考地址：https://github.com/kangax/htm...

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry : {
        main : './src/js/main.js',
        calc : './src/js/calc.js'
    },
    output : {
        //__dirname，就是当前webpack.config.js文件所在的绝对路径
        path : __dirname + '/dist', //输出路径，要用绝对路径
        filename : 'js/[name]-[hash].bundle.js', //打包以后输出的文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template : './index.html',
            title : 'ghostwu教你学webpack',
            inject : false,
            minify : {
                removeComments : true, //去掉注释
                collapseWhitespace : true, //去掉空行
            }
        })
    ]
};

这里，咱们配置了两种经常使用的压缩选项( 去掉注释，去掉空行），那么打包生成的index.html文件，就会变成压缩版（好比你看到的jquery.min.js这样的文件，都是通过压缩处理的）