webpack之HtmlWebpackPlugin和UglifyjsWebpackPlugin（带你一步步学webpack）

我们在前面学习了webpack关于css文件，图片文件的处理，包括对js不同版本的转化。但是对于html的打包还没涉及到。今天我们讲对html文件的打包。

今天我们要学的这个东西属于webpack的插件。webpack插件是4大核心概念之一。今天介绍的htmlwebpackplugin插件他有俩个功能：

1，自动生成打包后的html文件（你也可以自定义一个模板，然后根据这个模板打包成一个html文件。）

2，对生成的文件，自动插入script标签，从而引入打包后来生成的js。

《1》安装格式如下：

npm install –save-dev html-webpack-plugin

《2》和loader有些不同，这里我们需要手动引入插件：

《3》接下来就是配置：

plugins是一个数组，每个数组元素是一个对象值，但是这个对象值采用的是new构造函数的返回值！里面可以传入一个选项对象，其中这个选项对象的一个属性就是template，可以自定义html模板。（要把原来的script标签去除掉，由于这个插件除了产生html页面后来，也会自动添加script标签）

接下来是跟js压缩有关的一个插件：uglifyjswebpackplugin。

安装语句： npm install –save-dev uglifyjs-webpack-plugin@1.1.1

这个设置版本号是用@，设置成1.1.1是由于我当前项目使用CLI2,保持匹配一致。

然后第一张截图所示继续在配置文件中引入js文件。

接着在plugin插件中添加：

我们要额外注意这些插件名称写法。