webpack教程五：插件

目录

一、插件介绍

二、HtmlWebpackPlugin

三、CleanWebpackPlugin

---

一、插件介绍

    首先，插件（Plugins）的目的在于解决loader无法实现的其他事。

    webpack提供了许多的插件以支持打包时进行更多的操作。另外，除了webpack提供的原生插件，许多第三方插件也使我们的打包更加便捷。

    现在我们来看两个实际打包过程中会经常用到的插件：HtmlWebpackPlugin和CleanWebpackPlugin

二、HtmlWebpackPlugin

    HtmlWebpackPlugin提供哪些功能呢？概括来说就是它简化了HTML文件的创建。

    我们先安装HtmlWebpackPlugin：

    webpack-demo/dist/dist.html文件现在是这样的：

    dist.html：

    现在将这个文件删除！！

    同时修改webpack.config.js：

    webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 导入HtmlWebpackPlugin

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'bundle.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包