插件[plugins] - 《webpack》

使用

插件(Plugins)是用来扩展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。

Loader和Plugins常被弄混，但是它们其实是完全不同的东西，loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less…),一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程起作用。

loader被用于转换为某些类型的模块，而插件则可以执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量，

使用

   想要使用一个插件，你只需要require()它，然后把它添加到plugins数组中，在数组中通过new来创建一个实例，插件分为内置插件和第三方插件，内置插件不需要导入，第三方插件在require之前需要导入。

导入插件 —-》》》 require(插件) —-》》》在配置文件中new一个实例

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})   //插件实例
  ]
};

module.exports = config;

                   <br />

插件名称	插件描述
AggressiveSplittingPlugin	将原来的 chunk 分成更小的 chunk
BabelMinifyWebpackPlugin	使用 babel-minify进行压缩
BannerPlugin	在每个生成的 chunk 顶部添加 banner
CommonsChunkPlugin	提取 chunks 之间共享的通用模块
CompressionWebpackPlugin	预先准备的资源压缩版本，使用 Content-Encoding 提供访问服务
ContextReplacementPlugin	重写 require 表达式的推断上下文
CopyWebpackPlugin	将单个文件或整个目录复制到构建目录
DefinePlugin	允许在编译时(compile time)配置的全局常量
DllPlugin	为了极大减少构建时间，进行分离打包

更多第三方插件，请查看 awesome-webpack 列表。