Webpack4.0基础教程四：plugins(插件)

loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

 

想要使用一个插件，你只需要require()它，然后把它添加到plugins数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用new操作符来创建它的一个实例。

 

这里我们只简单地讲几个插件。

 

1.HtmlWebpackPlugin

这个插件非常有用，它会生成一个html文件，并将打包后的文件添加到进去，也就省去了我们手动去创建去添加，特别是我们打包的文件名可能经常会更改，这时这个插件就会非常有用。

 

现在我们来简单演示一遍：

首先安装该插件：npm install --save-dev html-webpack-plugin

 

在webpack.config.js中进行配置，添加plugins属性如下：

   plugins: [
    new HtmlWebpackPlugin({
      title: 'yaodebian',
      filename: 'index.html',
      template: './src/index.html',
      inject: true
    })
  ]
 

当然别忘了在文件开头对该插件进行引入：const HtmlWebpackPlugin = require('html-webpack-plugin');

 

上面我进行了某些配置：title、filename、template、inject

title: 其实就是html文件中title标签的内容，上面的title配置其实会被template中指定的html文件配置。在没有配置template属性时，自动生成的html文件的title标签字段就是该title属性的值。

filename: 指定生成的html文件的位置，其相对于出口目录而定；

template: 模板就是用来copy的，该属性就是指定一个html文件作为将会生成的html文件的模板，相对于webpack配置文件目录而言，它的作用就是生成的文件内容将会在template指定的文件内容基础上再将打包后的bundle.js文件添加进去组合成一个新的html文件。

• inject: 它有四个值true、body、head、false
• true 默认值，script标签位于html文件的 body 底部
• body script标签位于html文件的 body 底部
• head script标签位于html文件的 head中
• false 不插入生成的js文件，这个几乎不会用到的

 

废话不多说，举个栗子：

像上面配置中，我是在src目录下添加了一个index.html并作为模板，index.html中的内容如下：

  
  
  
  


  
hello world
  

我们再来打包一下，结果可以看到dist目录下生成了一个新的index.html覆盖了之前的index.html:

  
  
  
  


  
hello world
  

看到了吧，就是将我们的模板添加上打包后的bundle.js文件，这样我们就不用自己创建html文件并手动插入script。

不过有一个问题，这其实就是我们之前在讲loader的时候讲的那个问题，用file-loader引入的一张图片，并会在出口目录下会生成一张以图片内容的MD5哈希值命名的图片。这个时候我们要在html文件中通过img标签来引用与呈现这张图片时就需要手动更改标签中src属性中图片的名字。我们想要让它自动更改应该要怎么实现呢？

自己在网上搜索了下，找到一个国人写的loader: html-withimg-loader

 

首先，我们安装该loader：npm install --save-dev html-withimg-loader，然后我们在webpack.config.js添加如下配置：

      {
        test: /\.html$/,
        loader: 'html-withimg-loader'
      }

 

最后在入口的js文件中引入我们作为html-webpack-plugin模板的html文件：

import './index.html'

这个时候我们进行打包，产生的index.html文件如下：

dist/index.html:

  
  
  
  


  
hello world
  


 

我们看下dist目录下的文件结构：

看到了吧，这个时候img标签的图片名就和打包后的图片是一样的了。

 

不过，这个loader在平时应该不怎么会去用，这里只是针对之前遇到的问题使用这个loader。

 

2.clean-webpack-plugin

你可能已经注意到，由于过去的指南和代码示例遗留下来，导致我们/dist文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。

通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。

上面两段是官方的原话，可能有些小伙伴不理解。通俗的讲，假如我们dist目录下有一个hello.js文件，但是我们打包生成的文件中没有这个文件，那打包之后这个文件就是多余的，我们根本不会用到，所以我们需要通过某些手段在打包之前将dist目录清空。这里，我们用到了clean-webpack-plugin。

 

安装该插件：npm install --save-dev clean-webpack-plugin

 

在webpack.config.js文件中进行如下配置：

添加插件声明：const CleanWebpackPlugin = require('clean-webpack-plugin');

使用插件：new CleanWebpackPlugin(['dist'])

上面初始化插件配置时传入的参数就是包含了要清空的目录的数组，详细的配置可以去官网查看。

为了验证插件的效果，我们先在dist目录下创建一个hello.js的文件：

最后我们再进行打包：npm run build

结果如下：

 

说明插件已经生效了！！！

 

对于上面的应用，官方提出了一个叫做Manifest的概念：

这里就不赘述，小菜我也还没研究过，希望之后找个时间再另外单独研究并总结一下。同样也希望各位小伙伴或大大分享相关方面的知识或文章哦！！！