Webpack5教程三:插件plugins

·  阅读 933
Webpack5教程三:插件plugins

「这是我参与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文件

  1. 安装插件

        npm install html-webpack-plugin
    复制代码
  2. 配置 webpack插件的使用都是通过实例化来实现的(要生成多少个html文件就new多个Plugin),如下代码执行后会在输出目录生成一个html文件(默认为index.html)且自动引入打包后的js文件

        const HtmlWebpackPlugin = require('html-webpack-plugin')
        module.exports = {
            //...
            plugins:[
                new HtmlWebpackPlugin()
            ]
        }
    复制代码

03webpack生成html文件.png

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

得意.gif

  1. 配置选项:

    • 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>
    复制代码

    生成后的效果如下:

03webpack指定模板生成html文件.png

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

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

03webpack输出多个文件.png

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

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

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

m1.jpeg

PS:实现自动清理输出目录还有一种更简单的方式,但只有webpack 5.20.0以上版本才支持,只需要设置output.cleantrue就行,是不是超级简单?赶紧拥抱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的插件有成百上千,但这些插件的使用都是类似的,区别在于它们的配置参数不同而以,只要我们了解了这些插件的共性,使用其它插件也不再是难事,大家可以自行查阅官网说明文档去也了解其它插件的配置参数

往期文章传送门

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改