以html-webpack-plugin插件为例javascript

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

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

即安装了html-webpack-plugin插件

)java

二、在配置文件中让插件生效，在module.exports={}对象中加入一个plugins字段，这个字段接收一个数组，也就意味着，能够给webpack应用不少各类各样的插件webpack

先将插件引进来：

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

因为插件能够携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。

plugins:[git

new HtmlWebpackPlugin()//注意后面不要加分号，不然执行会出错

]

运行npm  run dev 在dist中会自动生成一个index.html文件，而且这个html中自动引入了main.js(注意：这里的dev和main.js都是咱们以前配置好的，根据你本身的设定能够不一样，若是，还有疑问，能够看我以前写过的文章

https://mp.csdn.net/postedit/...)，代码以下所示

若是咱们有本身的html文件，里面已经有一些写好的结构，想要在这个文件的基础上加载打包后的main.js，咱们只须要在配置里面指定一个参数(是一个对象)，这个对象里面能够包含两个属性filename和templategithub

filename：指定当咱们打包好以后，新建的html文件的名字叫什么，若是不写的话，默认生成的是index.html

template：指定以哪一个html为模板去建立

plugins:[web

new HtmlWebpackPlugin({

filename:'first.html',//打包好后，新建的html名字为first.html

template:'./src/index.html'//以src下面的index.html为模板去建立新的html文件

})

]

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

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

two.html

嗯、是否是超级简单，其实这些在webpack的官网上均可以找到，附上连接，有兴趣的能够看看哦，并且官网巨详细滴

https://github.com/jantimon/h...

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

插件：clean-webpack-plugin

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

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

三、使用：new CleanWebpackPlugin(['dist'])//表明删除dist这个文件夹，固然也能够是其余的，很简单就再也不说了

其实，插件嘛，只要一个会用了，其它的也就简单了，因此也就再也不多提什么了，若是我以为有必要的话，还会再写的

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

做者：冰雪为融

来源：CSDN

原文：https://blog.csdn.net/lhjueji...

版权声明：本文为博主原创文章，转载请附上博文连接！