18款Webpack插件,总会有你想要的!

点击上方“阿拉奇学Java”,选择“置顶或者星标

每天早晨0000分,与你相约!


往日回顾:Centos7搭建k8s环境教程,一次性成功,收藏了!

这篇文章整理了18个Webpack插件,分享给Web开发的小伙伴。Plugin是一个扩展器,它丰富了webpack本身,针对的是loader结束后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听webpack打包过程中的某些分段,执行广泛的任务。

插件的特点

  • 是一个独立的模块

  • 模块对外暴露一个js函数

  • 函数的原型(prototype)上定义了一个注入compiler对象的apply方法apply函数中需要有通过compiler对象挂载的webpack事件钩子,钩子的替换中能拿到当前编译的compilation对象,如果是异步编译插件的话可以拿到一部分callback

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

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

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

本文在gitthub作收录:github.com/Michael-lzg ...

01、HotModuleReplacementPlugin

模块热更新插件。Hot-Module-Replacement的热更新是依赖于webpack-dev-server,有时是在打包文件改变时更新打包文件或者重新加载刷新整个页面,HRM是只更新修改的部分。

HotModuleReplacementPlugin是webpack模块自带的,所以约会webpack后,在plugins配置项中直接使用即可。

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

02、html-webpack-plugin

生成HTML文件。将的WebPack中entry配置的相关入口chunk状语从句:extract-text-webpack-plugin抽取的CSS样式插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个HTML文件,具体插入方式的英文将样式link插入到head元素中,script插入到head或者body中。

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [  new HtmlWebpackPlugin({    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底部

  • 正文:script标签位于html文件的body底部(同true)

  • 头: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,那么filename分裂不可改变,否则交替生成的都是index.html。

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

HtmlWebpackPlugin提供了一个chunks的参数,可以接受一个副本,配置此参数仅可以插入分割中指定的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文件。

03、clean-webpack-plugin

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

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

04、提取文本Webpack插件

该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象

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

05、迷你CSS提取插件

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

  • 初步加载

  • 不重复编译,性能更好

  • 更容易使用

  • 只针对CSS

这个插件应该只用在生产环境配置,并且在loaders链中不使用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',    }),  ],}

06、purifycss-webpack

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

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

07、优化CSS资产Webpack插件

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

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

08、UglifyJsPlugin

uglifyJsPlugin是vue-cli默认使用的压缩代码方式,用于对js文件进行压缩,从而替换js文件的大小,加速加载速度。它使用的是单线程压缩代码,打包时间较慢,所以可以在开发环境中将其关闭,生产环境部署时再把它打开。

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

09、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

自动加载模块。任何时候,当identifier被当作未赋值的变量时,module就会自动被加载,并且identifier会被这个模块输出的内容所赋值。这是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 run build:dll命令会在打包目录下生成vendor-manifest.json文件与vendor.dll.js文件。然后npm run build生产其他文件。

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

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

16、快乐包

HappyPack实现webpack把任务分解给多个子进程去并发执行,子进程处理完后再把结果发送给主进程。要注意的HappyPack对file-loader,url-loader支持的不友好,所以不建议该加载程序使用。

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内置插件,它的作用是:忽略第三方包指定目录,让这些指定目录不要被打包进去。

例如我们要使用moment这个第三方依赖库,该库主要是对时间进行格式化,并支持多种国家语言。虽然我设置了语言为中文,但是在打包的时候,是替换所有语言都打包进去的。这样就导致包很大,打包速度又慢。这样做,我们可以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)

来源 | https://github.com/Michael-lzg/my--article/blob/master/webpack/

回复「进群」即可进入无广告技术交流群。同时送上250本电子书+学习视频作为见面 
有你想看的精彩 


Centos7搭建k8s环境教程,一次性成功,收藏了!
那个 14 岁上大学、17 岁读博、24 岁当教授的天才神童,如今怎么样了?
华为阿里腾讯下班时间曝光:所有的光鲜,都有加班的味道
国家两部委出手!tiktok可能卖不了了....
图解 SQL,这也太形象了吧!
Docker 极简入门教程,傻瓜都能看懂!
一款vue编写的功能强大的swagger-ui,有点秀(附开源地址)
目前5000+ 人已关注加入我们

       
       

好文章,我在看
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页