webpack中html-webpack-plugin插件的使用（生成多个html页面，引入不同的js文件）

心已赠人 2022-05-25 02:24 635阅读 0赞

以html-webpack-plugin插件为例

1、先安装插件，在命令行中输入：npm  i -D html-webpack-plugin（执行完之后，在package.js的devDependencies中就多了下面的代码

"html-webpack-plugin": "^3.2.0"

即安装了html-webpack-plugin插件

）

2、在配置文件中让插件生效，在module.exports=\{\}对象中加入一个plugins字段，这个字段接收一个数组，也就意味着，可以给webpack应用很多各种各样的插件

*  先将插件引进来：

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

*  由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。

plugins:[
            new HtmlWebpackPlugin()//注意后面不要加分号，否则执行会出错
        ]

*  运行npm  run dev 在dist中会自动生成一个index.html文件，并且这个html中自动引入了main.js（注意：这里的dev和main.js都是我们之前配置好的，根据你自己的设定可以不同，如果，还有疑问，可以看我之前写过的文章

[https://mp.csdn.net/postedit/80213261][https_mp.csdn.net_postedit_80213261]），代码如下所示

如果我们有自己的html文件，里面已经有一些写好的结构，想要在这个文件的基础上加载打包后的main.js，我们只需要在配置里面指定一个参数（是一个对象），这个对象里面可以包含两个属性filename和template

1.  filename：指定当我们打包好之后，新建的html文件的名字叫什么，如果不写的话，默认生成的是index.html
2.  template：指定以哪个html为模板去创建

plugins:[
            new HtmlWebpackPlugin({
                filename:'first.html',//打包好后，新建的html名字为first.html
                template:'./src/index.html'//以src下面的index.html为模板去创建新的html文件
            })
        ]

打包好之后，在dist文件中就会自动生成一个first.html文件，并且，这个html文件中包含了index.html中的结构，并且，也会自动引入main.js文件

OK，就先写这么多，持续更新中……

更新：

**html压缩输出**：在插件配置文件中加入：minify;\{

collapseWhitespace:true,//压缩空白

removeAttributeQuotes:true//删除属性双引号

**生成链接消除缓存：**

在插件配置文件中加入hash(bool)：hash:true

**在生成的html文件中加入自己的title：**首先在插件配置文件中加入title:"名字"，然后一定要记得在模板的title中加入下面的代码

**想要生成多个html页面**：filename，这个上面我们已经说到过，filename可以指定生成html文件的名字，那么这也就可以用来区分我们要生成的html页面，否则默认情况下生成的都是index.html，那么自然也就无法生成多个页面了，用法上面已经讲过了，就不再重复说了（注意，想要生成多个html页面，就要调用多次插件）

**想要在生成的不同的html页面中引入不同的js文件**，怎么做？很简单，只要在插件配置文件中加入：chunks:\["入口文件名"\]，即可，如果不加的话，会在生成的html页面中引入所有的入口文件哦

看完整webpack配置文件代码（下面的是生成多个页面，引入不同的js文件）

webpack.config.js中的代码

const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        entry:{//入口文件
            one:"./src/index.js",
            two:"./src/main.js"
        },
        output:{//输出的文件
            path:path.resolve(__dirname,'dist'),
            filename:'[name].boundle.js'
        },
        mode:"development",
        plugins:[
            new HtmlWebpackPlugin({
                template:'./src/one.html',
                filename:'one.html',//生成的html页面的名字为one.html
                title:"one",//它的title为one，记得要在src/one.html中加入<%= %>
                hash:true,
                chunks:['one']
            }),
            new HtmlWebpackPlugin({
                template:'./src/two.html',
                filename:'two.html',
                title:"two",
                hash:true,
                chunks:['two']
            })
        ]
    }

因为涉及到title的变化，所以也把两个模板html中的代码贴出来

one.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
    <div>hello one</div>
    </body>
    </html>

two.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
    <div>hello two</div>
    </body>
    </html>

嗯、是不是超级简单，其实这些在webpack的官网上都可以找到，附上链接，有兴趣的可以看看哦，而且官网巨详细滴

[https://github.com/jantimon/html-webpack-plugin\#configuration][https_github.com_jantimon_html-webpack-plugin_configuration]

再稍微提一个，删除文件的插件吧，这个很简单，我就把步骤写一下，不做详细的扩展

插件：clean-webpack-plugin

1、下载：npm i -D clean-webpack-plugin

2、引入：在配置文件中引入，和上面的引入方式一样;const CleanWebpackPlugin = require('clean-webpack-plugin')

3、使用：new CleanWebpackPlugin(\['dist'\])//代表删除dist这个文件夹，当然也可以是其他的，很简单就不再说了

其实，插件嘛，只要一个会用了，其它的也就简单了，所以也就不再多提什么了，如果我觉得有必要的话，还会再写的

还有就是打字有点快，可能有的地方不小心打错了，还请大家海涵，如果发现并提出来那就更好了，还有一种可能，就是打的都对（哈哈），不过也不介意提出别的关于技术的意见，什么都行滴，互相学习互相进步

[https_mp.csdn.net_postedit_80213261]: https://mp.csdn.net/postedit/80213261
[https_github.com_jantimon_html-webpack-plugin_configuration]: https://github.com/jantimon/html-webpack-plugin#configuration