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

wmui 发布于2019-08-20 14:50 / 1189人阅读

摘要：可以根据你设置的模板，在每次运行后生成对应的模板文件，同时所依赖的也都会被引入，如果中含有值，则生成的模板文件也会引入正确版本的文件。

上一节的入门中，只是跑通了一个很简单的webpack项目的流程，对其中的参数以及实战运用中的一些用法并不太清楚，虽然目前工作项目中并没有用起webpack，不过觉得还是需要再去摸索一番，以便可以更清楚的用起这个工具。

上一节最终运行webpack命令，会在dist目录下生成一个js文件，这时候新建一个index.html文件并引入这个js：

index.html




    
    This is a test


Start:

这中间的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添加在引入文件地址的末尾，类似于我们常用的时间戳，比如最终引入是：。这个可以避免缓存带来的麻烦

cache: 是否需要缓存，如果填写true，则文件只有在改变时才会重新生成

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

chunks: 引入的模块，这里指定的是entry中设置多个js时，在这里指定引入的js，如果不设置则默认全部引入

chunksSortMode: 引入模块的排序方式

excludeChunks: 排除的模块

xhtml: 生成的模板文档中标签是否自动关闭，针对xhtml的语法，会要求标签都关闭，默认false

我的WebPack入门（一）

[3]

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81963.html

webpack入门学习手记（一）

摘要：争取早日能完全抛弃掉中文文档，最终可以翻译英文文档，输出英文文档。待续相关文章入门学习手记一入门学习手记二入门学习手记三入门学习手记四本人微信公众号：前端修炼之路，欢迎关注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用过gulp、grunt，但是一直没有学习过webpack。这两天刚好有时间，学习了下...

mengera88 2019-08-23 14:01 评论0 收藏0
React入门：从零搭建一个React项目

摘要：一初始化项目新建文件夹，文件名文件夹名称不要用，这类关键字，后面使用插件时会发生错误。未设置会报一个警告。四在项目中使用安装。一、初始化项目新建文件夹，文件名firstreact 文件夹名称不要用react，node这类关键字，后面使用插件时会发生错误。 init项目环境，项目信息可默认或自行修改 mkdir firstreact cd firstreact npm ...

stackvoid 2019-08-23 15:20 评论0 收藏0
wepback入门到放弃

摘要：四配置配置规则放在的数组里，每个是一个对象，是正则匹配，匹配文件后缀名，是要用是数组是所需要的是要加载哪些文件，是忽略掉哪些文件。实现解析，用会在写入在文件顶端导入中加入插件。最近研究webpack略有小成，特此写篇博客。虽然webpack有官网api,但是个人认为webpack api一点都不人性化，不自己研究研究，根本看不懂。今天先从写webpack-dev-server开始。...

blastz 2019-08-23 10:23 评论0 收藏0
React入门0x001: 环境配置和 helloworld

摘要：概述开坑系列文章，不知道会写到什么程度，毕竟写文章并不在行，存在当做笔记做，先不讲理论，实践先行。 0x000 概述开坑 react 系列文章，不知道会写到什么程度，毕竟写文章并不在行，存在当做笔记做，先不讲理论，实践先行。 0x001 创建项目 $ mkdir 0x001-helloworld $ cd 0x001-helloworld $ yarn init -y 0x0002 ...

yibinnn 2019-08-26 12:17 评论0 收藏0
Webpack系列—快速入门

摘要：如使用插件为我们自动生成一个文件。安装使用生产和开发构建分离生产和开发中的构建肯定是不同，生产中侧重于一个更好的开发体验，而生产环境中则需要更多的性能优化，更小的。可以指定命令运行以来的配置文件，通过在中写入是一种不错的方式。原文地址：https://github.com/huruji/blog/issues/3 入口单文件入口指定entry键值 const config = { ...

TIGERB 2019-08-20 19:08 评论0 收藏0