webpack工程化07（html in webpack）

在之前的webpack demo中，我们在浏览器中查看结果，都是通过手动引入打包生成的文件，这样很不方面，而且在项目中，我们生成的文件一般都是带有版本号的，有没有方法让html自动加载生成的包呢？

接下就介绍一下今天要讲的插件(HtmlWebpackPlugin)（代码用的是webpack工程化06（文件处理）的demo）

        new HtmlWebpackPlugin({
        })

在配置文件中，加入HtmlWebpackPlugin插件，我们先什么都不传，先打包看看结果。

打包多出来了一个index.html

html里面自动帮我们把文件引入了。

---

我们有时候需要对index.html做一些处理，比如网站图标，所以我们希望有一个模板文件。

        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.join(__dirname, 'index.html')
        })

除此之外，HtmlWebpackPlugin还有一些其他的参数也是常用的，inject：是否插入html，以及插入位置，minify压缩

---

如果我们需要在html模板中引入图片

我们直接打包看一下效果。

html中的图片路径并没有被处理，我们是找不到这张图片的。

所以，我们需要一个html-loader，在配置文件中加一段如下的配置

            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            attrs: ['img:src', 'img:data-src']
                        }
                    }
                ]
            }

attrs是匹配属性，当前写法表示img标签中的src属性和data-src属性上的都会被处理。

最后再说一个插件clean-webpack-plugin

因为每次打包生成的文件是带版本号的，每次的名字都不一样，所以dist目录下会保留之前生成的文件，解决的办法也很简单，每次打包的时候先把dist目录删除即可。