webpack4配置详解之常用插件分享

前言

　　继上一次webpack的基础配置分享之后，本次将分享一些工作中项目常用的配置插件、也会包含一些自己了解过觉得不错的插件，如有分析不到位的，欢迎纠错，嗯，这些东西文档都有，大佬可绕过。

　　Wepack4之后废弃了很多的插件，这里只会讲解webpack4还支持的（包含4之前插件），已经废弃的将不再阐述。

　　上一次的分享之后，有部分网友留言质疑：骗小白的赞、是否原创、是否是抄别人等等，当然也有很多的网友支持和鼓励，不管褒贬，苏南都非常的感谢，是你们让我认识到自己的不足与优劣。

　　大家的留言，让我想起了自己刚入门前端初期的心酸，基本靠自己自学，没有人带，遇到问题像无头的苍蝇，到处乱撞网上一顿搜索，百度不曾欺我，在点了一个又一个的广告之后，翻过十页八页之后终于找到了问题的解决方案。

　　执着于对前端的热爱，常常一个问题卡到深夜，初入前端的我曾一度感叹在编辑器写一些东西，在网页上就能跑，甚至感叹 js 写上一个 alert hello world，浏览器就会自动弹出一个窗口，感觉全世界都在向你招手，当时的兴奋是难以形容的，甚至幻想着未来有一天，可能有千万、亿万的用户，在用你写的东西。

　　这几天一直在想，这篇插件的总结还是否要继续写下去？从写博客到今天，将近两个月吧，也算是一个新人，技术方面虽说工作了几年，但也不敢说多牛B，写博客的初衷是为了对自己工作中遇到的问题/心得等做一个总结，俗话说：好记性不如烂笔头；同时也希望能把自己遇到的问题、坑点分享给他人，让遇到同样问题的基友们能少走那么一点点弯路。

　　终于最后在想了很久之后明白，人无完人，百人百性、千人千面，不管你做总会有不同的声音，同样不管你分享什么，总会有人需要。所以走自己的路，让别人打车吧，坚持自己所想 努力成为自己想成为的样子，就是对自己最大的肯定 ———— 至曾经初入前端的我们。

去做想做的事，去爱值得的人；

去成为自己喜欢的模样，

去让自己发光！浑身充满力量，

充实的日子最美好！

各位早安，这里是@IT·平头哥联盟，我是首席填坑官∙苏南，用心分享 一起成长 做有温度的攻城狮。

公众号：honeyBadger8，群：912594095

mini-css-extract-plugin

css-提取，看名字就懂提取css用的。

在这之前我们可能会使用extract-text-webpack-plugin比较多一些，两者相比它有什么优势呢？

extract-text-webpack-plugin 它对css的提取，最终是根据你创建的实例、或者配置多个入口 chunk来的，

比如你配置了一个入口文件，最终所有的css都会提取在一个样式文件里，

如果你创建了多个extract-text-webpack-plugin实例，则会生成多个css的文件，

而mini-css-extract-plugin，它默认就会对你的样式进行模块化拆分，嗯，有点跟output里的配置一个意思，异步按需加载，不再仅仅是js的特权;

//extract-text-webpack-plugin 编译打包 config.module.rules.push({ test: /\.(scss|css)$/, use: ExtractTextPlugin.extract({ use: [ "css-loader", { //首席填坑官∙苏南的专栏 交流：912594095、公众号：honeyBadger8 loader: 'postcss-loader', options: { plugins: [ require('autoprefixer')({ //添加前缀 browsers: CSS_BROWSERS, }), ], minimize: true }, }, "sass-loader" ] }) }) config.plugins.push(new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true, })); //mini-css-extract-plugin 编译打包 config.module.rules.push({ test: /\.(scss|css)$/,//同时处理css/scss use: [ { loader: MiniCssExtractPlugin.loader, }, "css-loader", //css处理器 { 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(new MiniCssExtractPlugin({ filename: 'css/[name].css', //这里配置跟output写法一致 chunkFilename: 'css/[id][chunkhash:8].css', })); config.plugins.push(new OptimizeCssAssetsPlugin({})); //压缩文件 optimize-css-assets-webpack-plugin

上面的示例里已经用到了，它的作用在于压缩css文件，

assetNameRegExp：默认是全部的css都会压缩，该字段可以进行指定某些要处理的文件，

cssProcessor：指定一个优化css的处理器，默认cssnano，

cssProcessorPluginOptions：cssProcessor后面可以跟一个process方法，会返回一个promise对象，而cssProcessorPluginOptions就是一个options参数选项！

canPrint：布尔，是否要将编译的消息显示在控制台，没发现有什么用！