plugin比loader强大，通过钩子可以涉及整个构建流程，可以做一些在构建范围内的事情。

Webpack的基本构建流程如下：

1. 校验配置文件
2. 生成Compiler对象
3. 初始化默认插件
4. run阶段：如果运行在watch模式则执行watch方法，否则执行run方法
5. compilation阶段：创建Compilation对象回调compilation相关钩子
6. emit阶段：文件内容准备完成，准备生成文件，这是最后一次修改最终文件的机会
7. afterEmit阶段：文件已经写入磁盘完成
8. done阶段：完成编译

一、webpack 内置

1. UglifyJsPlugin： 压缩代码插件

new UglifyJSPlugin({
      sourceMap: true,
      uglifyOptions: {
        warnings: false,
        parse: {},
        compress: { // 删除本地调试信息
            drop_debugger: true,
            drop_console: true 
        },
        /**
        * mangle: 是否混淆变量名（为了使可读性变得极差）
        * 包含的属性有（未列举完全）：
        *   keep_fnames: true, 是否混淆函数名（默认false）
        *   toplevel: true //是否混淆定义在顶层作用域的名字（默认false）
        **/
        mangle: true, // Note `mangle.properties` is `false` by default.
        output: {
           comments: false, //是否保留注释
           keep_quoted_props: true //是否会保留对象属性名的引号
       },
        parallel: true, // 实付开启多进程并行运行构建
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_fnames: false,
      },
    }),

2. ProvidePlugin: 自动加载模块，代替require和import

new webpack.ProvidePlugin({     
         '$': "jquery",
         'jQuery': "jquery",
         'window.jQuery': "jquery",
         'window.$': 'jquery'
     }),

3. CommonsChunkPlugin: 针对第三方库单独打包

new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: "js/vendor.js",
            children: true,
            minChunks: Infinity,
        }),

4. DefinePlugin：允许创建一个在编译时可以配置的全局常量

        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
            'COUPONAPIHOST': JSON.stringify(`${getCouponApiHost()}`),
            'CUSTOMERAPI': JSON.stringify(`${getCustomerApiHost()}`),
            'INTROAPI': JSON.stringify(`${getIntroApiHost()}`)
        }),

5. webpack-merge： 合并两个配置文件

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
    // 其它配置
    ...
})

二、其它热门插件

extract-text-webpack-plugin: 将js文件中引用的样式单独抽离成css文件，防止将样式打包在js中引起页面样式加载错乱的现象

new ExtractTextPlugin({
          filename:"css/index.css",
          allChunks:false,
 
      }),

CopyWebpackPlugin: 直接拷贝某个目录下的文件

new CopyWebpackPlugin([{
            context: path.resolve(context, '../3rdProject'),
            from: `*.min.js`
        }])

moduleIdPlugin:

HashedModuleIdsPlugin：

html-webpack-plugin：

optimize-css-assets-webpack-plugin： 不同组件中的重复的css可以快速去重

ParallelUglifyPlugin：webpack-parallel-uglify-plugin

CleanWebpackPlugin：清除之前构建的dist文件

let { CleanWebpackPlugin } = require("clean-webpack-plugin");
plugins: [
    new CleanWebpackPlugin()
]

HappyPack：通过多进程模型，来加速代码构建

查看更多插件戳这里➡️：官网给出的一些超棒的webpack插件

三、自定义编写webpack插件

如何自定义编写plugin: 戳这里➡️how to write a plugin