webpack配置之html-webpack-plugin

最新推荐文章于 2024-09-10 09:38:33 发布

天空影

最新推荐文章于 2024-09-10 09:38:33 发布

阅读量2.5k

点赞数

分类专栏：大前端-配置项文章标签： html-webpack-plugin webpack

本文链接：https://blog.csdn.net/jx950915/article/details/80096559

版权

大前端-配置项专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍如何使用html-webpack-plugin插件配置Webpack，实现自动创建并注入JS文件到HTML的功能。通过具体示例展示了插件的基本配置方法及高级选项如title、filename、template等的使用技巧。

摘要由CSDN通过智能技术生成

用途：我们可以直接在src文件夹写html文件，打包后会自动在dist文件夹下生成这个html文件，并直接引用配置的js文件

示例：webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        "main":"./src/js/main.js",
        "config":"./src/js/config.js",
        'callSource':"./src/js/config/callSource.js"
    }, 
    output:{
        path:__dirname+ "/dist/",
        filename:"js/[name].js",       
    },
    ...
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            chunks:['main']
        })
    ]
}

打包后你会神奇的发现dist文件夹下也有一个index.html，并且这个html文件</body>引入了main.js。不过这些是最简单的配置。接下来详细的介绍一番。

安装

npm install html-webpack-plugin --save

配置 webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        "main":"./src/js/main.js",
        "config":"./src/js/config.js",
        'callSource':"./src/js/config/callSource.js"
    }, 
    output:{
        path:__dirname+ "/dist/",
        filename:"js/[name].js",       
    },
    ...
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            chunks:['main']
        })
    ]
}

参数

title：顾名思义，设置生成的 html 文件的标题。

filename：也没什么说的，生成 html 文件的文件名。默认为 index.html。（不同的html可以放在不同的输出文件夹下，例：filename:'./config/config.html'，这样就会在dist/config/config.html。

template：根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定义的模板文件时，需要提前安装对应的 loader，否则webpack不能正确解析。

inject：

true （默认 script标签位于html文件的 body 底部）
body （同true）
head （script 标签位于 head 标签内）
false （不插入生成的 js 文件，只是单纯的生成一个 html 文件）

favicon：给生成的 html 文件生成一个 favicon。属性值为 favicon 文件所在的路径名。

plugins: [
    new HtmlWebpackPlugin({
        ...
        favicon: 'path/to/yourfile.ico'
    }) 
]
//打包后文件包含：
<link rel="shortcut icon" href="example.ico">

minify：minify 的作用是对 html 文件进行压缩，minify 的属性值是一个压缩选项或者 false 。默认值为false, 不对生成的 html 文件进行压缩。

hash：hash选项的作用是给生成的 js 文件一个独特的 hash 值，该 hash 值是该次 webpack 编译的 hash 值。默认值为 false 。

cache:默认值是 true。表示只有在内容变化时才生成一个新的文件。

showErrors：showErrors 的作用是，如果 webpack 编译出现错误，webpack会将错误信息包裹在一个 pre 标签内，属性的默认值为 true ，也就是显示错误信息。

chunks：chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。chunks 默认会在生成的 html 文件中引用所有的 js 文件，当然你也可以指定引入哪些特定的文件。

excludeChunks：跟 chunks 是相反的，排除掉某些 js 文件

chunksSortMode和xhtml这两个就不说了，我感觉用不到！！

题外话

这几天因为任务太闲，然后项目都是jq插件堆起来的，我就想着是否可以用webpack来集成打包的，结果是可以的！而且我还要引用了angular v1的路由。

问：我为什么一开始不直接上手webpack或者vue?

答：我也想呀，我一开始环境都搭好了。但是因为老大写过前端（只会jq，easyui）,然后前端代码要编译进c语言中，所以老大只想看到jq写的东西，并且是html文件中写js。所以我用新东西都提心吊胆的，比如 foreach