webpack之常用的Plugin

plugin就是插件,基于事件流框架``tapable.主要用于扩展webpack的功能,在webpack运行的生命周期中会广播出很多事件,plugin可以监听这些事件,通过webpack提供的api改变输出结果,它是在plugins中配置,每一项都是plugin```的实例,参数都是通过构造函数传入.

define-plugin

创建一个编译时可以配置的全局常量,一般用于某个功能的开启和禁用
https://www.webpackjs.com/plugins/define-plugin/

ignore-plugin

防止在调用import或者require生成某些正则表达式的匹配模块(忽略部分文件)
https://www.webpackjs.com/plugins/ignore-plugin/

html-webpack-plugin

生成html文件
为html文件中引入的外部资源(script,link)动态添加每次compile的hash,防止引用缓存的外部文件问题
可以生成创建html入口文件,在spa可以生成一个html文件入口,配置多个html-webpack-plugin可以生成多个页面入口
https://www.webpackjs.com/plugins/html-webpack-plugin/

terser-webpack-plugin

用于压缩js文件
https://www.npmjs.com/package/terser-webpack-plugin

webpack-parallel-uglify-plugin

多线程压缩js代码,加快构建速度
https://www.npmjs.com/package/webpack-parallel-uglify-plugin

mini-css-extract-plugin

将css单独打包成一个文件的css,它为
https://www.npmjs.com/package/mini-css-extract-plugin

serviceworker-webpack-plugin

为网页应用增加离线缓存功能
https://www.npmjs.com/package/serviceworker-webpack-plugin

clean-webpack-plugin

用于清除目录文件,在生产环境中编译文件的时候,用它来讲dist的目录清除干净,然后再生成新的
https://www.npmjs.com/package/clean-webpack-plugin

module-concatenation-plugin

用于开启Scope Hoisting(作用域提升),提高代码在浏览器中的执行速度
https://www.webpackjs.com/plugins/module-concatenation-plugin/

speed-measure-webpack-plugin

用于看各个插件和loader所花费的时间,对比打包信息,用于确认优化效果(每个plugin和loader耗时)
https://www.npmjs.com/package/speed-measure-webpack-plugin

webpack-bundle-analyzer

可视化webpack输出的个业务组件和依赖的第三方模块文件的体积
https://www.npmjs.com/package/webpack-bundle-analyzer

compression-webpack-plugin

提供带 Content-Encoding 编码的压缩版的资源(网络传输压缩gzip)
https://www.webpackjs.com/plugins/compression-webpack-plugin/

uglifyjs-webpack-plugin

用于压缩js文件
https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin/

commons-chunk-plugin

提取第三方库和公共模块,避免首屏加载的bundle文件或者按需加载的bundle文件体积过大,导致加载时间过长,用于项目优化.
https://www.webpackjs.com/plugins/commons-chunk-plugin/

split-chunks-plugin

可以设置在共享代码块大于一定体积的时候,将代码块进行拆分,然后首次请求的时候和加载代码块的时候的最大请求数量,用于项目优化
https://www.webpackjs.com/plugins/split-chunks-plugin/

webpack动态加载模块

require.ensure(['动态加载的模块'], function(res) {
   res('动态加载的的模块');
});

以后再补充