分享18个webpack插件，你千万要收藏好，留备用

何为插件（Plugin）？专注处理webpack在编译过程中的某个特定的任务的功能模块，可以称为插件。

插件是一个扩展器，它丰富了webpack本身，针对的是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些实例，执行广泛的任务。

插件的特点

是一个独立的模块

模块对外暴露一个js 函数

函数的原型（原型）上定义了一个注入编译对象的适用方法适用  函数中需要有通过编译对象挂载的  的WebPack  事件钩子，钩子的回调中能拿到当前编译的编译对象，如果是异步编译插件的话可以拿到些回调

完成自定义子编译流程并处理complition对象的内部数据

如果异步编译插件的话，数据处理完成后执行callback。

下面介绍18个常用的webpack插件。

1、HotModuleReplacementPlugin

的热更新是依赖于  webpack -dev-server，另外是在打包文件更改时更新打包文件或者重新加载刷新整个页面，HRM是只更新修改的部分。

HotModuleReplacementPlugin是webpack模块自带的，所以♡webpack后，在插件配置项中直接使用即可。

const webpack = require('webpack')plugins: [  new webpack.HotModuleReplacementPlugin(), // 热更新插件]

2、html -webpack-plugin

生成html文件。将webpack中条目配置的相关入口大块和extract-text-webpack-plugin的css样式插入到该插件提供的模板或模板内容配置项指定的内容基础上生成一个html文件，具体插入方式是将样式链接插入到head元素中，脚本插入到head或者body中。

const htmlWebpackPlugin = require('html-webpack-plugin')plugins: [  newhtmlWebpackPlugin({    filename: 'index.html',    template: path.join(__dirname, '/index.html'),    minify: {      // 压缩html文件      removeComments: true, // 移除html中的注释      collapseWhitespace: true, // 删除空白符与换行符      minifycss: true, // 压缩内联css    },    inject: true,  }),]

注入有四个选项值

true：默认值，script标签位于html文件的body底部

body：script标签置于html文件的body底部（同true）

head：script标签放在head标签内

false：不插入生成的js文件，只是单纯的生成一个html文件

多页应用打包

有时，我们的应用不一定是一个单页应用，或者一个多页应用，那么如何使用webpack进行打包呢。

const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {  entry: {    index: './src/index.js',    login: './src/login.js',  },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].[hash:6].js',  },  //...  plugins: [    new HtmlWebpackPlugin({      template: './public/index.html',      filename: 'index.html', //打包后的文件名    }),    new HtmlWebpackPlugin({      template: './public/login.html',      filename: 'login.html', //打包后的文件名    }),  ],}

如果需要配置多个HtmlWebpackPlugin，则文件名不可更改，否则生成的都是index.html。

但是有个问题，index.html和login.html会发现，都同时约会了index.f7d21a。js  和login.f7d21a。js，通常这不是我们想要的，我们希望index.html中止日期index.f7d21a。js，login.html只保留login.f7d21a。js。

HtmlWebpackPlugin提供了一个块的参数，可以接受一个数组，配置此参数唯一的插入数组中指定的js日期到html文件中。

module.exports = {  //...  plugins: [    new HtmlWebpackPlugin({      template: './public/index.html',      filename: 'index.html', //打包后的文件名      chunks: ['index'],    }),    new HtmlWebpackPlugin({      template: './public/login.html',      filename: 'login.html', //打包后的文件名      chunks: ['login'],    }),  ],}

这样执行  npm run build，可以看到index.html中唯一约会了index的js文件，而login.html中也只有约会了login的js文件。

3、clean-webpack-plugin

clean-webpack-plugin用于在打包前清理上一次项目生成的捆绑文件，它会根据output.path自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过hash生成很多bundle文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大。

const { CleanWebpackPlugin } = require('clean-webpack-plugin')plugins: [  new HtmlWebpackPlugin({    template: path.join(__dirname, '/index.html'),  }),  new CleanWebpackPlugin(), // 所要清理的文件夹名称]

4、提取文本Webpack插件

将CSS成生文件，而非内联。该插件的主要是为了抽离CSS样式，防止将样式打包在JS中引起页面样式加载错乱的现象

const ExtractTextPlugin = require('extract-text-webpack-plugin')plugins: [  // 将css分离到/dist文件夹下的css文件夹中的index.css  new ExtractTextPlugin('css/index.css'),]

5、迷你CSS提取插件

将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap。只能用在webpack4中，对比另一个插件extract-text-webpack-plugin有以下特点：

初步加载

不重复编译，性能更好

更容易使用

只针对CSS

这个插件应该只用在生产环境配置，并且在装载机上链中不使用style-loader，而且这个插件暂时不支持HMR

const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = {  module: {    rules: [      {        test: /\.(le|c)ss$/,        use: [          {            loader: MiniCssExtractPlugin.loader,            options: {              publicPath: '../',            },          },          'css-loader',          'postcss-loader',          'less-loader',        ],      },    ],  },  plugins: [    new MiniCssExtractPlugin({      filename: 'css/[name].[contenthash:8].css',      chunkFilename: 'css/[id].[contenthash:8].css',    }),  ],}

6、purifycss-webpack

有时候我们css写更多了或者重复了，由此造成了多余的代码，我们希望在生产环境进行移除。

const path = require('path')const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件const glob = require('glob') // 引入glob模块,用于扫描全部html文件中所引用的cssmodule.exports = merge(common, {  plugins: [    new PurifyCssWebpack({      paths: glob.sync(path.join(__dirname, 'src/*.html')),    }),  ],})

7、优化CSS资产Webpack插件

我们希望串联css打包后的体积，可以用到Optimiz-css-assets-webpack-plugin。

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css代码optimization: {  minimizer: [    // 压缩css    new OptimizeCSSAssetsPlugin({})  ] }

8、UglifyJsPlugin

uglifyJsPlugin是  vue -cli默认使用的压缩代码方式，用于对js文件进行压缩，从而插入js文件的大小，加速加载速度。

它使用的是单线程压缩代码，打包时间较慢，所以可以在开发环境将其关闭，生产环境部署时再把它打开。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')plugins: [  new UglifyJsPlugin({    uglifyOptions: {      compress: {        warnings: false      }    },    sourceMap: true,  //是否启用文件缓存    parallel: true  //使用多进程并行运行来提高构建速度  })

9、ParallelUglifyPlugin

开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，每个子进程其实还是通过UglifyJS去压缩代码，但是变成了并行执行。

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')plugins: [  new ParallelUglifyPlugin({    //cacheDir 用于配置缓存存放的目录路径。    cacheDir: '.cache/',    sourceMap: true,    uglifyJS: {      output: {        comments: false,      },      compress: {        warnings: false,      },    },  }),]

10、terser-webpack-plugin

Webpack4.0默认是使用terser-webpack-plugin这个压缩插件，在此之前是使用uglifyjs-webpack-plugin，它们的区别是对ES6的压缩不是很好，同时我们可以开启parallel参数，使用多进行压缩，加快压缩。

const TerserPlugin = require('terser-webpack-plugin') // 压缩js代码optimization: {  minimizer: [    new TerserPlugin({      parallel: 4, // 开启几个进程来处理压缩，默认是 os.cpus().length - 1      cache: true, // 是否缓存      sourceMap: false,    }),  ]}

11、NoErrorsPlugin

报错但不退出webpack进程。编译出现错误时，使用NoEmitOnErrorsPlugin来跳过输出阶段。这样可以确保输出资源不会包含错误。

plugins: [new webpack.NoEmitOnErrorsPlugin()]

12、压缩webpack插件

所有现代浏览器都支持gzip压缩，启用gzip压缩可扩展和扩展传输资源大小，从而延长资源下载时间，减少首次白屏时间，提升用户体验。

gzip对基于文本格式文件的压缩效果最好（如：CSS，JavaScript和HTML），在压缩压缩文件时往往可实现高达70-90％的压缩率，对已经压缩过的资源（如：图片）进行gzip压缩处理，效果很不好。

const CompressionPlugin = require('compression-webpack-plugin')plugins: [  new CompressionPlugin({    // gzip压缩配置    test: /\.js$|\.html$|\.css/, // 匹配文件名    threshold: 10240, // 对超过10kb的数据进行压缩    deleteOriginalAssets: false, // 是否删除原文件  }),]

当然，这个方法还需要预先配置支持。

13、定义插件

我们可以通过DefinePlugin可以定义一些类别的变量，我们可以在模块之间直接使用这些变量，无需作任何声明，DefinePlugin是webpack自带的插件。

plugins: [  new webpack.DefinePlugin({    DESCRIPTION: 'This Is The Test Text.',  }),]// 直接引用console.log(DESCRIPTION)

14、ProvidePlugin

任何时候，当标识符被视为未赋值的变量时，模块就会自动被加载，并且标识符会被这个模块输出的内容所赋值。这是webpack自带的插件。

module.exports = {  resolve: {    alias: {      jquery: './lib/jquery',    },  },  plugins: [    //提供全局的变量，在模块中使用无需用require引入    new webpack.ProvidePlugin({      $: 'jquery',react: 'react',    }),  ],}

15、DLL插件

这是在一个额外的独立的webpack设置中创建一个只有dll的bundle（dll-only-bundle）。这个插件会生成一个清单manifest.json的文件，这个文件是用来让DLLReferencePlugin映射到相关的依赖上去的。

使用步骤如下：

1，在build下创建webpack.dll.config.js

const path = require('path')const webpack = require('webpack')module.exports = {  entry: {    vendor: [      'vue-router',      'vuex',      'vue/dist/vue.common.js',      'vue/dist/vue.js',      'vue-loader/lib/component-normalizer.js',      'vue',      'axios',      'echarts',    ],  },  output: {    path: path.resolve('./dist'),    filename: '[name].dll.js',    library: '[name]_library',  },  plugins: [    new webpack.DllPlugin({      path: path.resolve('./dist', '[name]-manifest.json'),      name: '[name]_library',    }),    // 建议加上代码压缩插件，否则dll包会比较大。    new webpack.optimize.UglifyJsPlugin({      compress: {        warnings: false,      },    }),  ],}

2，在webpack.prod.conf.js的插件后面加入配置

new webpack.DllReferencePlugin({  manifest: require('../dist/vendor-manifest.json'),})

3，package.json文件中添加快捷命令（build：dll）

"scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    "start": "npm run dev",    "lint": "eslint --ext .js,.vue src",    "build": "node build/build.js",    "build:dll": "webpack --config build/webpack.dll.conf.js"  }

生产环境打包的时候先npm运行build：dll命令在打包目录下生成vendor-manifest.json文件与vendor.dll.js文件。然后npm运行build生产其他文件。

4，根目录下的入口index.html加入引用

<script type="text/JavaScript" src="./vendor.dll.js"></script>

16、快乐包

对文件加载器，URL加载器支持的不友好，所以不建议该加载程序使用。

1，HappyPack插件安装

npm i -D happypack

2，webpack.base.conf.js文件对module.rules进行配置

module: {  rules: [    {      test: /\.js$/,      use: ['happypack/loader?id=babel'],      include: [resolve('src'), resolve('test')],      exclude: path.resolve(__dirname, 'node_modules'),    },    {      test: /\.vue$/,      use: ['happypack/loader?id=vue'],    },  ]}

3、在生产环境中webpack.prod.conf.js文件进行配置

const HappyPack = require('happypack')// 构造出共享进程池，在进程池中包含5个子进程const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })plugins: [  new HappyPack({    // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件    id: 'babel',    // 如何处理.js文件，用法和Loader配置中一样    loaders: ['babel-loader?cacheDirectory'],    threadPool: HappyPackThreadPool,  }),  new HappyPack({    id: 'vue', // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件    loaders: [      {        loader: 'vue-loader',        options: vueLoaderConfig,      },    ],    threadPool: HappyPackThreadPool,  }),]

注意，当项目较小时，多线程捆反而增加捆速度变慢。

17、复制webpack插件

我们在public / index.html中约会了静态资源，但是打包的时候webpack并不会帮我们复制到dist目录，因此copy-webpack-plugin就可以很好地帮我做副本的工作了。

const CopyWebpackPlugin =

      require('copy-webpack-plugin')module.exports =

        {  plugins: [    new CopyWebpackPlugin

                    ({      patterns: [        {          from: 'public/js/*.js',         

                                                to: path.resolve(__dirname, 'dist', 'js'),         

                                                flatten: true,        },      ],    }),  ],}

18、忽略插件

这是webpack内置插件，它的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去。

例如我们要使用一下这个第三方依赖库，该库主要是对时间进行格式化，并支持多种国家语言。虽然我设置了语言为中文，但是在打包的时候，是替换所有语言都打包进去的。这样就导致包很大，打包速度又慢。进行，我们可以用IgnorePlugin忽略指定目录，从而使打包变快，文件变小。

const Webpack = require('webpack')plugins:

[  //moment这个库中，

  如果引用了./locale/目录的内容，就忽略掉，不会打包进去

  new Webpack.IgnorePlugin

  (/\.\/locale/, /moment/),]

我们虽然按照上面的方法忽略了包含'./locale/'该变量路径的文件目录，但是也使用我们使用的时候不能显示中文语言了，所以这个时候可以手动发布中文语言的目录。

import moment from 'moment'//手动引入所需要的语言包import 'moment/locale/zh-cn'moment.locale('zh-cn')let r = moment().endOf('day').fromNow()console.log(r)

本文完~

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,236评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,867评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,715评论 0赞 340
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,899评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,895评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,733评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,085评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,722评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,025评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,447评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,057评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2赞 343