webpack中html-webpack-plugin插件的运用（天生多个html页面，引入差别的js文件）

2019年9月1日 188次阅读 来源: shaoxiong789

以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…
版权声明：本文为博主原创文章，转载请附上博文链接！

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