乐趣区

webpack中htmlwebpackplugin插件的使用生成多个html页面引入不同的js文件

jiezi

以 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/…），代码如下所示
<script type=”text/javascript” src=”main.js”></script>
如果我们有自己的 html 文件，里面已经有一些写好的结构，想要在这个文件的基础上加载打包后的 main.js，我们只需要在配置里面指定一个参数（是一个对象），这个对象里面可以包含两个属性 filename 和 template

filename：指定当我们打包好之后，新建的 html 文件的名字叫什么，如果不写的话，默认生成的是 index.html
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 中加入下面的代码

<title><%= htmlWebpackPlugin.options.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/h…
再稍微提一个，删除文件的插件吧，这个很简单，我就把步骤写一下，不做详细的扩展

插件：clean-webpack-plugin

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

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

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

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

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

作者：冰雪为融
来源：CSDN
原文：https://blog.csdn.net/lhjueji…
版权声明：本文为博主原创文章，转载请附上博文链接！

退出移动版