我的WebPack入门（二）——html-webpack-plugin

2024年2月28日 211次阅读 来源: 前端老李

上一节的入门中，只是跑通了一个很简单的webpack项目的流程，对个中的参数以及实战应用中的一些用法并不太清晰，虽然现在事情项目中并没有效起webpack，不过以为照样须要再去探索一番，以便能够更清晰的用起这个东西。

上一节终究运转webpack敕令，会在dist目次下天生一个js文件，这时候新建一个index.html文件并引入这个js：

  • index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>This is a test</title>
</head>
<body>
<div id="test">Start:</div>
<script src="bundle.f9be197eff25e8667c8c.js"></script>
</body>
</html>

这中心的f9be197eff25e8667c8c就是上一次运转webpack敕令时天生的hash值，假如每次对js修改，然后运转webpack敕令，都邑引发hash值的变化，也就是说每次都得在index.html中转变引入js的称号，如许明显不合理，这时候能够引入一些插件来举行一些流程上的优化。

html-webpack-plugin

html-webpack-plugin能够依据你设置的模板，在每次运转后天生对应的模板文件，同时所依靠的CSS/JS也都邑被引入，假如CSS/JS中含有hash值，则html-webpack-plugin天生的模板文件也会引入准确版本的CSS/JS文件。

装置（Install）

npm install html-webpack-plugin --save-dev

引入

在webpack.config.js中引入：

const HtmlWebpackPlugin = require('html-webpack-plugin');

设置

module.exports = {
    entry: './app/index.js',
    output: {
        ...
    },
    module: {
        ...
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "This is the result",
            filename: "./index.html",
            template: "./app/index.html",
            inject: "body",
            favicon: "",
            minify: {
                caseSensitive: false,
                collapseBooleanAttributes: true,
                collapseWhitespace: true
            },
            hash: true,
            cache: true,
            showErrors: true,
            chunks: "",
            chunksSortMode: "auto",
            excludeChunks: "",
            xhtml: false
        })
    ]
};

然后看一下这些参数的意义：

  • title: 天生的HTML模板的title，假如模板中有设置title的名字，则会疏忽这里的设置

  • filename: 天生的模板文件的名字

  • template: 模板泉源文件

  • inject: 引入模块的注入位置；取值有true/false/body/head

  • favicon: 指定页面图标；

  • minify: 是html-webpack-plugin中集成的 html-minifier ，天生模板文件紧缩设置，有许多设置项，能够检察细致文档

       caseSensitive: false, //是不是大小写敏感
   collapseBooleanAttributes: true, //是不是简写boolean花样的属性如：disabled="disabled" 简写为disabled 
   collapseWhitespace: true //是不是去除空格

  • hash: 是不是天生hash添加在引入文件地点的末端，类似于我们经常使用的时候戳，比方终究引入是：<script type="text/javascript" src="bundle.049424f7d7ea5fa50656.js?049424f7d7ea5fa50656"></script>。这个能够防止缓存带来的贫苦

  • cache: 是不是须要缓存，假如填写true，则文件只要在转变时才会从新天生

  • showErrors: 是不是将错误信息写在页面里，默许true，涌现错误信息则会包裹在一个pre标签内添加到页面上

  • chunks: 引入的模块，这里指定的是entry中设置多个js时，在这里指定引入的js，假如不设置则默许悉数引入

  • chunksSortMode: 引入模块的排序体式格局

  • excludeChunks: 消除的模块

  • xhtml: 天生的模板文档中标签是不是自动封闭，针对xhtml的语法，会请求标签都封闭，默许false

我的WebPack入门（一）

[3]

    原文作者：前端老李
    原文地址: https://segmentfault.com/a/1190000008590102
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞