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

等等还有一些如：定义压缩的程度、提出多次出现但没有变量的值的配置，想深入的同学可移步官方；

//默认： optimization:{ minimizer:true }; //自定义 minimizer: [ new UglifyJsPlugin({ cache: true, // cache: "assets", parallel: true, //也可以指定 Number ,即最多并行运行数量 sourceMap: true, uglifyOptions: { output: { comments: false, …… //首席填坑官∙苏南的专栏，QQ:912594095 }, compress: { warnings: false, drop_console:true, …… } }, }), ], BannerPlugin

这个插件，它的作用在于某些时候，我们需要对文件添加一些说明，比如版本号，作者、日期等，

它就可以帮到，每次编译，在头部插件一些注释；

它可以直接是一个字符串，也可以是一个options;

嗯，差点忘说了，它是webpack自带的一个插件，不用另外再安装依赖，

//字符串： new webpack.BannerPlugin('给文件添加一些信息，打包日期：'+ new Date()); //自定义 plugins: [ new webpack.BannerPlugin({ { banner: ' \n @item:苏南的项目 \n @author:suSouth \n @date:'+new Date()+' \n @description:苏南的项目 \n @version:'+package.version+' \n', // 要输出的注释内容 test:string/正则/数组，//可用于匹配某些文件才输出， entryOnly: boolean, // 即是否只在入口 模块 文件中添加注释； …… } }) ], preload-webpack-plugin

在使用这个插件之前，我们需要先了解一下 preload、prefetch，从字面意思上讲：预加载，

不难理解，就是提前加载资源(匹配其他页面可能用到的资源进行预先，从而达到无loading ，用户无感知的跳转)，它的使用也非常的简单，在你要进行预加载的资源上添加标签即可；

示例：

而preload-webpack-plugin它的作用就是在编译打包的时候，帮我们把以上的操作都做了，

编译完成后，你可以（指定某些/全部）文件动态插入到 HtmlWebPackPlugin 配置输出的文件内，

as： 表示你预加载的资源类型；可以有有先多：script、font、image、style、video等等，更多详细请查看API，它还可以返回function；

include：要插入，进行预加载的文件，它有：allChunks、initial、asyncChunks、数组等选项，数组即表示指定插入某些文件

fileBlacklist:即文件黑名单，可以指定某个文件，也可以使用正则来匹配；

//注意点1：请把配置一定写在HtmlWebPackPlugin插件之后，否则会报`HtmlWebpackPlugin.getHooks is not a function`错误， //注意点2：webpack4之后，请使用最新版本 npm install --save-dev preload-webpack-plugin@next， new PreloadWebpackPlugin({ rel: 'prefetch', as: 'script', // as(entry) { // if (/\.css$/.test(entry)) return 'style'; // return 'script';//首席填坑官∙苏南的专栏，QQ:912594095 // }, include: 'asyncChunks', // fileBlacklist: ["http://www.likecs.com/index.css"] fileBlacklist: [/\index.css|index.js|vendors.js/, /\.whatever/] }) webpack-bundle-analyzer

这个插件还是蛮棒的，强烈推荐可以看看，也是本次分享的最后一个插件

它的作用在于能帮我们很清晰直观的看到，你编译后的每一个、每一个文件哦，内容的分布组成，有利于我们快速查找包过大、内容是否重复、问题定位优化等；

它会在编译完成后，自动启动一个服务、也可以自定义配置，打开一个可视化窗口，鼠标移动到对应的模块上，都可以显示出，该模块在某文件内占比的大小及stat、parsed、gzipped等的状态；

analyzerHost、analyzerPort：自定配置打开的地址、端口，默认使用：127.0.0.1:8888

reportFilename： 报告生成的路径，默认以项目的output.path输出；

openAnalyzer：是否要自动打开分析窗口，

其他还有很多属性，官网也有，这里只是引导简介，请大佬们勿喷；