分享一些webpack4配置中常用的插件

前言　　继上次分享了webpack的基本配置之后，这次分享一些工作中项目中常用的配置插件，以及一些经常用到的插件我知道和认为是好的。如分析不到位，欢迎指正。好吧，这些东西都有文档，你可以绕过它们。　　很多插件在Wepack4之后就被废弃了。这里只说明webpack4还支持的（包括4之前的插件），已经放弃的就不细说了。　　上次分享后，有掘金网友留言质疑：骗小白点赞，是不是原创，是不是抄袭别人等等。当然，也有很多网友支持鼓励。不管是表扬还是批评，苏南都非常感谢您，是您让我认识到了自己的不足和优缺点。　　大家的留言让我想起了刚开始接触前端时的难过。我基本上是自己学的，没有人指导。当我遇到问题时，我就像一只无头苍蝇。我在互联网上到处搜索。百度从来没有骗过我。一个接一个地点击广告，翻了十几八页，终于找到了解决问题的办法。　　我痴迷于前端的热爱。我经常在一个问题上卡到深夜。刚入前端的时候，曾经感叹在编辑器里写点东西，在网页上运行。甚至感叹js写了一个alerthelloworld。浏览器会自动弹出一个窗口，感觉整个世界都在向你招手，那时候的兴奋是无法形容的，甚至幻想着未来的某一天，可能会有几千万、几亿的用户，使用你写的东西。　　这几天一直在想，要不要继续写这个插件的总结？从写博客到今天，快两个月了，还是个新人。虽然做了几年技术，但不敢说自己牛逼。写博客的初衷是了解自己在工作中遇到的问题/经验。等等做个总结，俗话说：好记性不如烂笔头；同时也希望把自己遇到的问题和陷阱分享给大家，让遇到同样问题的朋友少走一点弯路。　　终于，想了半天，终于明白，没有人是完美的，每个人的性格不同，面孔不同，无论你做什么，总会有不同的声音，无论你分享什么，都有永远是需要它的人。所以走自己的路，让别人打车，坚持自己想要的，努力成为自己想成为的，这就是对自己最大的肯定————对刚入前端的我们。做自己想做的事，爱一个值得的人；成为自己喜欢的样子，让自己发光！元气满满，最充实的日子就是最好的！大家早上好，这里是@IT·平头哥联盟，我是首席填坑官?苏楠，用心分享，共同成长，做温暖的攻城狮。　　：honeyBadger8，群：912594095mini-css-extract-plugincss-extraction，看名字就是用来提取css的。在此之前，我们可能会更多地使用extract-text-webpack-plugin。两者的优势是什么？extract-text-webpack-plugin根据您创建的实例提取css或配置多个入口块。比如你配置一个入口文件，所有的css都会被提取到一个style文件中。如果你创建了多个extract-text-webpack-plugin实例，会生成多个css文件，而mini-css-extract-plugin，默认会将你的样式模块化，嗯，有点和output里的配置一样，异步按需加载，不再只是js的特权；//extract-text-webpack-plugin编译打包config.module.rules.push({test:/\.(scss|css)$/,use:ExtractTextPlugin．autoprefixer')({//添加前缀浏览器:CSS_BROWSERS,}),]],minimize:true},},"sass-loader"]})})config.plugins.push(newExtractTextPlugin({filename:'css/[name].css',disable:false,allChunks:true,}));//mini-css-extract-plugin编译打包config.module.rules.push({test:/\.(scss|css)$/,//处理css/scss同时使用：[{loader:MiniCssExtractPlugin.loader,},"css-loader",//cssprocessor{loader:'postcss-loader',/*postcss这个插件的作用是和现有的工具集成，在很少的情况下单独使用，我们使用最多的常见的是用autoprefixer添加各个浏览器的前缀，以达到更好的兼容性。更深入一点的是cssnext，它允许开发者自定义属性和变量：color:var(--theme-color,#42b983);*/options:{plugins:[require('autoprefixer')({browsers:CSS_BROWSERS,}),],},},"sass-loader"//sass处理器，即使你也可以加一个less处理器]})config.plugins.push(newMiniCssExtractPlugin({filename:'css/[name].css',//这里的配置与输出一致chunkFilename:'css/[id][chunkhash:8].css',}));config.plugins.push(newOptimizeCssAssetsPlugin({}));//上面例子中已经使用了压缩文件optimize-css-assets-webpack-plugin，它的作用是压缩css文件，assetNameRegExp:默认是所有的css都会被压缩，这个字段可以指定一些文件到被处理，cssProcessor：指定一个处理器来优化css，默认cssnano，cssProcessorPluginOptions：cssProcessor后面可以跟一个process方法，会返回一个promise对象，而cssProcessorPluginOptions是一个options参数选项！canPrint:Boolean，是否在控制台显示编译后的信息，没发现有什么用！陷阱：建议使用更高版本的包。之前低版本遇到了各浏览器样式丢失和前缀被杀的问题。newOptimizeCssAssetsPlugin({assetNameRegExp:/\.optimize\.css$/g,cssProcessor:require('cssnano'),cssProcessorPluginOptions:{preset:['default',{discardComments:{removeAll:true}}],//自动前缀:{browsers:CSS_BROWSERS},也可以指定前缀},canPrint:true})SplitChunksPlugin,RuntimeChunkPlugin它们与上一篇优化配置下的splitChunks和runtimeChunk基本相同；SplitChunksPlugin和RuntimeChunkPlugin实际上是webpack4之前CommonsChunkPlugin的替代品，用于提取一些公共模块；chunks：要处理的类型，一共有三个Value：all，async，initialminSize：最小尺寸maxSize：最大包尺寸，超过一个新包的尺寸minChunks：必须至少被引用N次的模块，maxAsyncRequests：最大数量按需加载的并行请求数maxInitialRequests：初始化加载请求的最大数量newwebpack.optimize.SplitChunksPlugin({chunks:'async',minSize:30000,maxSize:0,minChunks:1,maxAsyncRequests:1,maxInitialRequests:1,name:true,//可以指定...,}),newwebpack.optimize.RuntimeChunkPlugin({name:'manifest',name:entrypoint=>`runtimechunk~${entrypoint.name}`//动态文件名})HotModuleReplacementPlugin热更新替换，替换不刷新重载页面编辑修改代码：它只会更新变化的内容，所以速度很快，几乎一变化，浏览器窗口的内容就已经更新了；使用HotModuleReplacementPlugin插件后，会暴露一个module.hot对象，它下面有很多属性：accept：有两个参数，一个是授权模块（可以直接是单个文件路径，也可以是包含的数组多个文件路径），第二个参数为回调函数，即更新后要做的逻辑处理decline有点黑名单的意思，就是忽略一些模块，不更新。状态当前有updated、idle、check、prepare、ready、dispose、apply、fail等；一般只有accept用的最多，下面有个例子；newwebpack.HotModuleReplacementPlugin()//路由入口页面...if(module.hot){module.hot.accept(['./pages/routes'],(err)=>{constNextRoute=require('./pages/routes')//从DOM中移除挂载的React组件并重新加载ReactDOM.unmountComponentAtNode(APP_DOM);ReactDOM.render(,APP_DOM);});}...html-webpack-plugin这个插件相信大家都不陌生，将编译后的文件（css/js）插入到入口文件中，可以只指定某些文件要插入，可以压缩html等。filename：输出文件名；template：模板文件，不限于html后缀；removeComments：移除HTML中的评论；collapseWhitespace：删除空格和换行符，将整个文件压缩成一行；inlineSource：插入到html中的css和js文件必须是内联的，即不以链接或脚本的形式导入；inject：是否可以将内容注入输出页面；chunks：指定插入一些Module；hash：每次插入的文件后都会加上hash，用来处理缓存，比如：;其他：网站图标、元数据、标题……；newHtmlWebPackPlugin({filename:path.resolve(__dirname,'../assets/index.html'),template:path.resolve(__dirname,"../views/temp.html"),minify:{//压缩HTML文件　　　removeComments:true,　　collapseWhitespace:true},inlineSource:'.(js|css)',inject:false,chunks:['vendors','index'],//列哈希：trueofchief填坑官?Sunan,favicon,meta,title等都可以配置，页面使用“<%=htmlWebpackPlugin.options.title%>”就够了...})uglifyjs-webpack-pluginjs代码压缩，默认会使用optimization.minimizer，cache:Boolean/String，字符串为缓存文件存放路径；test：可以使用正则表达式、字符串、数组来匹配特定文件，如：/.js(?.*)?$/i；parallel：编译频繁时，启用多线程并行运行，提高编译速度听到电脑呼呼的声音，可能是它干的，哈哈~；output.comments：删除所有评论，compress.warnings：当插件删除一些无用代码时，不会提示警告，compress.drop_console：我喜欢打Console的同学，它可以自动帮你过滤掉，而你再也不用为在线打印日志而烦恼了；etc.还有一些东西比如：定义压缩程度，提出多次出现但没有变量值的配置，想深入的同学可以移步官网；//default:optimization:{minimizer:true};//自定义最小化器:[newUglifyJsPlugin({cache:true,//cache:"assets",parallel:true,//也可以指定Number，即最大并行操作数sourceMap:true,uglifyOptions:{output:{comments:false,...//该列的首席填坑官?苏楠，QQ:912594095},compress:{warnings:false,drop_console:true,...}},})],BannerPlugin插件，它的作用是在某个时刻，我们需要在文件中添加一些说明，比如版本号，作者，日期等，可以帮忙，每次编译的时候，在header中添加一些注释；可以直接是字符串，也可以是选项；好吧，差点忘了说，是webpack自带的插件，不需要额外安装依赖，//String:newwebpack.BannerPlugin('在文件中添加一些信息，打包日期：'+newDate());//自定义插件:[newwebpack.BannerPlugin({{banner:'\n@item:Sunan的项目\n@author:suSouth\n@date:'+newDate()+'\n@description:苏南的项目\n@version:'+package.version+'\n',//要输出的注释内容test:string/regular/array,//输出前可以用来匹配某些文件，entryOnly:boolean,//即是否只在入口模块文件中添加注释;...}})],preload-webpack-plugin在使用这个插件之前，我们需要先了解preload和prefetch。从字面上理解：preloading，不难理解，就是提前加载资源（匹配其他页面可能用到的资源进行预加载，达到不加载，用户没有跳转感），其使用也很简单。当你想预加载资源只需添加rel="preload"标签；example:而preload-webpack-plugin的作用就是编译打包帮助我们完成以上所有操作。编译完成后，可以动态插入（指定部分/全部）文件到HtmlWebPackPlugin配置的输出文件中。script,font,image,style,video等，详情请查看API，也可以返回函数；include：要插入预加载的文件，有：allChunks、initial、asyncChunks、array等选项，array表示指定插入某些文件fileBlacklist：文件黑名单，可以指定某个文件，也可以使用正则表达式匹配;//注意1：请在HtmlWebPackPlugin插件后写配置，否则会报`HtmlWebpackPlugin.getHooksisnotafunction`错误，//注意2：webpack4后请使用最新版本npminstall--save-devpreload-webpack-plugin@next,newPreloadWebpackPlugin({rel:'prefetch',as:'script',//as(entry){//if(/\.css$/.test(entry))return'style';//return'script';//首席填坑官?苏南专栏,QQ:912594095//},include:'asyncChunks',//fileBlacklist:["index.css"]fileBlacklist:[/\index.css|index.js|vendors.js/,/\.whatever/]})webpack-bundle-analyzer插件还是很不错的。强烈推荐看看。也是本次分享的最后一个插件。它的作用就是帮助我们清晰直观的看到你编译的每一个文件。内容的分布和组成有助于我们快速找到包大，内容是否重复，问题定位优化等；编译完成后，会自动启动一个服务，也可以自定义配置，打开一个可视化窗口，将鼠标移到对应的模块上，即可显示，模块在a中的比例大小文件和stat、parsed、gzipped等状态；analyzerHost、analyzerPort：自定义配置开启的地址和端口，默认使用：127.0.0.1:8888reportFilename：生成报告的路径，默认为项目输出。路径输出；openAnalyzer：是否自动打开分析窗口，还有很多其他属性，官网也有，这里只是引导介绍，请勿喷；plugins:[newBundleAnalyzerPlugin({...})//默认配置很好，可以满足我们的要求]常用插件地址汇总：mini-css-extract-plugin样式提取插件优化-css-assets-webpack-plugin样式优化压缩/配合添加前缀等html-webpack-plugin生成入口文件并注入对uglifyjs-webpack-plugin的依赖js压缩preload-webpack-plugin资源预加载webpack-bundle-analyzer可视化编译分析copy-webpack-plugin文件copyBannerPlugin在文件开头添加注释typings-for-css-modules-loaderawesome-typescript-loader结束：完整配置示例　　以上是常用的插件-今天为大家整理的几个项目中的ins。可能有些地方不是很了解。欢迎补充，我也为大家准备了一个整合后完整的webpack配置示例，有兴趣的可以自己测试　　下一期打算和大家分享《如何在React中封装一个组件》（或者说存入一个组件库）来简单的练习一下React的入门方法？欢迎继续关注。觉得不错记得点个赞哦。当然，如果大家能动动手指关注一下下面的公众号就更好了，谢谢大家的支持！更多文章：如何设置localStorage的过期时间？如何用CSS3画出懂你的3D立方体？SVGSpritesIconimmutability的使用技巧因React的正式亮相而总结分享！又一个小程序项目的填坑笔记做完小程序项目，老板给我加了6k工资~面试踩过的坑都在这里~你应该做的前端性能优化总结！如何设置localStorage的过期时间？教你画赛车作者：苏南-首席填空官链接：https://blog.csdn.net/weixin_...传播：912594095，公众号：honeyBadger8本文为原创，版权归本站所有作者。商业转载请联系@IT·平头哥联盟获得授权。非商业转载请注明原文链接和出处。