Webpack5教程三：插件plugins

站长

2022年12月07日 14:59 · 阅读数 18

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」。

通过前两篇文章《webpack5教程一：初识webpack》、《webpack5教程二：资源模块与加载器》的学习，我们已经能利用webpack实现所有资源文件的加载与打包，但打包完成为怎么演示效果呢？

我们之前的做法是自己创建一个html文件，然后手动引入打包后的main.js文件，

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Webpack</title>
        </head>
        <body>
            <script src="./main.js"></script>
        </body>
    </html>

但这样会有个问题：如果每次打包后的文件名都是main.js，上线后会有缓存问题，导致页面不会更新。

解决这样问题很简单，前面我们学过，可以通过output.filename添加hash字符的方式每次生成不同的文件名称来解决浏览器缓存问题

    module.exports = {
        //...
        output:{
            //...
            filename:'bundle-[hash:5].js'
        }
    }

但这样又会出现另一个问题：因为每次打包文件名都不同，所以打包后每次都要在html代码中重新的引入js文件，这样非常繁琐

    <script src="./bundle-9034a.js"></script>

有没有一种，打包后能自动引入js文件的操作？答案是plugin插件，这也是本文的主要内容，接下来咱们先说说webpack插件的使用，然后再来解决上面的问题

什么是webpack plugin

Loader是用来解决资源文件的加载和编译问题，它只在模块加载环节工作，而Plugin就是用来处理loader工作以外的自动化工作：用来增加Webpack在项目自动化构建方面的能力，能作用于Webpack工作流程的方方面面，正是有了Plugin，让Webpack几乎无所不能

插件能做什么

自动生成所需的html文件
实现打包前清除dist输出目录的内容
拷贝不需要打包的资源文件到输出目录
压缩webpack打包后的输出文件
自动化部署
...

接下来我们用三个插件来讲解决插件的用法

1、Webpack插件之生成html文件：`html-webpack-plugin`

以生成html文件为例，需要使用html-webpack-plugin，该插件也是几乎所有基于webpack项目必用的插件，接下来我们利用它实现上面的问题：生成html文件并自动引入打包后的js文件

安装插件
```
    npm install html-webpack-plugin
```
配置 webpack插件的使用都是通过实例化来实现的（要生成多少个html文件就new多个Plugin），如下代码执行后会在输出目录生成一个html文件（默认为index.html）且自动引入打包后的js文件
```
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
        //...
        plugins:[
            new HtmlWebpackPlugin()
        ]
    }
```

Webpack5教程三：插件plugins

生成的index.html文件也自动引入了生成的js文件，上面的问题是不是解决啦？

Webpack5教程三：插件plugins

配置选项：

template：指定模板默认生成的html文件是一个空的html文件，body中没有任何内容，如果要生成有特定结构的html文件，可以通过template选项指定模块创建html文件，在模板中可通过<% htmlWebpackPlugin.options.xx %>获取到配置信息
filename：指定生成html文件名（默认为：index.html）一般用于多页面应用，用于生成多个文件
chunks：html文件指定引入模块一般用于多页面应用，默认情况下生成的html文件都会引入所有打包后的文件，可通过该设置指定引入文件
title：指定生成html文件的title

    module.exports = {
        //...
        plugins:[
            new HtmlWebpackPlugin({
                template:'./src/index.html'
            }),
            new HtmlWebpackPlugin({
                title:'登录页',
                template:'./src/index.html',
                filename:'login.html'
            })
        ]
    }

    <!-- ./src/index.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    </html>

生成后的效果如下：

Webpack5教程三：插件plugins

2、Webpack插件之清理输出目录：clean-webpack-plugin

从上面的截图你可以已经看到，webpack每次打包都会在dist目录下生成对应文件（包括一些图片文件），由于每次生成的文件可能不同，久而久之，该目录下就会生成很多文件，导致难以管理

Webpack5教程三：插件plugins

我们可以使用clean-webpack-plugin实现在打包前先清除之前生成的文件，配置如下：

   const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    module.exports = {
        //...
        plugins:[
            new CleanWebpackPlugin()
        ]
    }

运行一下webpack打包，每次都能清理之前的文件了，妈妈再也不用担心我找错文件啦~~

Webpack5教程三：插件plugins

PS：实现自动清理输出目录还有一种更简单的方式，但只有webpack 5.20.0以上版本才支持，只需要设置output.clean为true就行，是不是超级简单？赶紧拥抱webpack5吧

    module.exports = {
        output:{
            //...
            clean:true
        }
    }

3、Webpack插件之拷贝不需要webpack处理的资源文件：copy-webpack-plugin

在实际开发中还有很多不需要经过webpack构建的文件（如：favicon.ico、robots.txt等），这些文件最终都需要部署到服务器，所以也需要放到最终的输出目录，可以通过copy-webpack-plugin插件来实现复制，避免手动操作，配置代码如下：

   const CopyPlugin = require("copy-webpack-plugin");
    module.exports = {
        //...
        plugins: [
             new CopyPlugin({
                patterns: [
                    // 把public文件夹复制到输出目录
                    './src/public',

                    // 把assets复制到输出目录中的imgs文件夹
                    { from: "./src/assets", to: "imgs" },
                ],
            }),
        ],
    }

结语

通过以上的讲解，我们已经学会了如何使用插件以，事实上，Webpack的插件有成百上千，但这些插件的使用都是类似的，区别在于它们的配置参数不同而以，只要我们了解了这些插件的共性，使用其它插件也不再是难事，大家可以自行查阅官网说明文档去也了解其它插件的配置参数

Webpack5教程三：插件plugins

什么是webpack plugin

插件能做什么

1、Webpack插件之生成html文件：html-webpack-plugin

2、Webpack插件之清理输出目录：clean-webpack-plugin

3、Webpack插件之拷贝不需要webpack处理的资源文件：copy-webpack-plugin

结语

往期文章传送门

1、Webpack插件之生成html文件：`html-webpack-plugin`