webpack—plugin的用法及常用的plugin

plugin有什么用处

插件也是webpack最强大的一个功能之一，插件可以实现很多loader无法完成的事情。他的工作其实是在打包构建的每个环节去添加对应生命钩子函数，并执行对应的钩子来对文件进行修改。如果说loader是实现模块化打包，那么plugin就是帮助我们构建自动化流程和优化的一个工具，比如自动清除代码，根据模板生成html文件，拷贝公共资源文件等

基本用法

plugin的使用非常简单，在配置中有一个pugins的属性，他是一个数组，每一个元素就是一个plugin，大多数情况下，plugin都是一个类

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'none',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin () // 大多数情况下plugin是一个类，对plugin进行实例化即可
  ]
}

这就是插件的基础用法，当然，我们也可以传递参数到构造函数内。

html-webpack-plugin

下面我们就html-webpack-plugin来说说具体的用法

零配置使用

首先我们试试不传递任何的参数

module.exports = {
  mode: 'none',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

可以看到，webpack帮我们生成了一个对应的html文件，并且将生成的js文件嵌入到该html中。这样做的好处是，我们不需要每次都去修改我们的页面的js文件的地址去进行测试，可以直接在dist目录下开启web服务即可进行开发测试。

传递参数来定义html文件的内容

同样的我们还可以传递对应的参数到构造函数内来定义生成的html文件内的内容，如标题，meta标签等。

module.exports = {
  mode: 'none',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'custom.html',
      title: 'webpack pages',
      meta: {
        viewport: 'user-scalable=no'
      }
    })
  ]
}

可以看到，我们定义的一些属性已经生效了，这个不详细展示，有兴趣可以到官方文档去查询一下，因为这种模式不是特别推荐

根据模板生成html文件

更为常用的生成html文件的方式是通过模板来生成，这样更加方便，易于使用。用法也非常的简单，我们只需要制定一个模板的路径即可

module.exports = {
  mode: 'none',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './template.html'
    })
  ]
}

这样，webpack会根据模板生成对应的html文件，并嵌入script标签

添加模板参数

有时候我们希望模板的参数可以通过变量来控制，这个时候我们就可以使用templateParameters来定义对应的参数，然后再模板中使用ejs语法即可<%= 变量名 %>

module.exports = {
  mode: 'none',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './template.html',
      templateParameters: {
        msg: '这是模板的参数'
      }
    })
  ]
}

最终执行结果

html-webpack-plugin还有其他的属性，这里就不一一列举，有兴趣可以去官网看一下

clean-webpack-plugin

从名称我们就能看出，这是一个清除的插件，主要目的就是清除上一次打包的dist目录，用法也非常简单。因为webpack只会帮我们覆盖同名的文件，所以如果不清除上一次打包生成的目录，则有可能产生垃圾文件

module.exports = {
  mode: 'none',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './template.html',
      templateParameters: {
        msg: '这是模板的参数'
      }
    })
  ]
}

假如现在打包前有一个垃圾文件，然后我们启动webpack

打包后可以看到垃圾文件被清除了

以上内容仅供学习参考