第五章webpack工程化-4节内容补充-day

Wck-wck性能优优化开提升效优化输提升代码性能，性能好，执行就快缩小文testincludeexclude三个配置缩小loader的处理范围include:include:path.resolve(dirname,优化resolve.modules配 寻找第模块，默认是在当前项目 去../../node_modules中找，以此类推，和Node.js的模块寻找机制很如果我们的第模块都安装在了项目根 modules:[path.resolve(dirname,}}优化resolve.alias配已经打包好的完整代码，没有采用模块化，可以直默认情况下，wck会从文件///at/indx开时。aliasalias:"@":path.join(dirname,"./pages"),react:path.resolve(dirname,"react-dom":)}优化resolve.extensions配默认值后缀尝试列表尽量 使用静态资源路径通过将资源部署到世界各地，使得用户可以就近资源，加快速度。要接入N，需要把网页的静态资源上传到N服在资源时，使用N服务提供的L。publicPatch:}指定存放JS文件的CDN确保静态资源文件的上css文件的处$$npminstalllessless-loader--save-{test:use:["style-loader","css-loader","less-} npmnpmipostcss-loaderautoprefixer-module.exports={[overrideBrowserslist:["last2versions",test:include:path.resolve(dirname,"./src"),use:[{options:{}]{body{divdisplay:flex;border:1pxredsolid;}}]如果不做抽取配置，我们 是直接打包 里面的，我们希望能

借助MiniCssExtractPlugin完成npmnpminstallmini-css-extract-plugin-constconstMiniCssExtractPlugin=require("mini-css-extract-{use:["style-loader"不再需要style-loader"css-loader",//编译css"sass-loader编译]plugins:newchunkFilename:"[id].css"]压缩借助optimize-css-assets-wck-借助npminstallcssnano-npmioptimize-css-assets-ck-plugin-constOptimizeCSSAssetsPlugin=require("optimize-css- newcssProcessorrequire("cssnano"//引入cssnano配置压缩选项cssProcessorOptions:{ments:{removeAll:true}压缩借助html-wck-ckPlugin({tle京东商城filename:"index.html",minify:{压缩HTMLments:true,//移除HTML中的注释collapseWhitespacetrue,删除空白符与换行符minifyCSS:true//压缩内联css}developmentvsProduction模式区分打npmnpminstallck-merge-案constconstmerge=constcommonConfig=require(" constdevConfig={}module.exports=}ck-dev-server--configck--confignpmnpmicross-env-"test":"cross-envNODE_ENV=testck-- 在wck.config.js里拿到参module.exports(env)=>{if(env&&returnreturn}}scripts:"--使用外部变量区分treewck2.x开始支持treeshaking概念，顾名思义，"摇树"，清除无用css,js(DeadCode)DeadCode一般具有以下几个特征代码执行的结果不会被代码只会影响死变量（只写不读Jstreeshaking只支持ESmoduleCsstreenpmnpmiglob-allpurify-csspurifycss-ck--save-constPurifyCSS=require('purifycss-w constglob=require('glob-all')//清除无用csspaths:要做CSSTreeShakingpath.resolve(dirname'./src/*.html请注意，我们同样需要对html文件进行treeshakingpath.resolve(dirname,]JStreeexportconstadd=(a,b){returna+exportconstminus=(a,b){returna-import{add}from"./expo";add(1,2);optimization:usedExportstrue}只要mode是production就会生效，develpoment的treeshaking是不生效 可以查看打包后的代码注释以辨别是否生副作"sideEffects":false正常对所有模块进行treeshaking,仅生产模式或者在数组里面排除不需要treeshaking的模块code打包完后，所有页面只生成了一个代码体积变大，不利于importimport_from其实codeSplitting概念与wck并没有直接的关系，只不过wck中基于{splitChunks:chunks"all"所有的chunks代码公共的部分分离出来成为一个{splitChunks:chunks'async',//对同步initial，异步async3

minSize:30000,//最小尺寸，当模块大于30kbmaxSize0,//对模块进行二次分割时使用，不推荐使用minChunks:1,//打包生成的chunk文件最少有几个chunk maxAsyncRequests:5,//最大异步请求数，默认5maxInitialRequests:3,//最大初始化请求书， :cacheGroups缓存组vendors:{test:/[\\/]node_modules[\\/]/,name:"vendor"要缓存的分隔出来的chunk名称priority:-10//缓存组优先级数字越大，优先级越高chunks"initial"必须三选一："initial"|all"|testreact|lodash/minChunks:{minChunks:priority:-:}}}}使用下面配置}}DllPlugin插件打包第类库优化构建性Dll动态.dll文件称为动态库，在windows系统会经常看到百科 项目中引入了很多第库，这些库在很长的一段时间内，基本不会更新，打包的时候分开打包来提升打包速度，而DllPlugin动态库插件，其原理就是把网页依赖的基础模块出来打包到dll文件中，当需要导入的模块存在于某个dl中时，这个模块不再被打包，而是去dll中获取。动态库只需要被编译一次，项目中用到的第模块，很稳定，如at,a-om，只要没有升级的需求wck已经内置了对动态库的支DllPlugin:用于打包出一个个单独的动态库文件 新建wck.dll.config.js文件，打包基础模 中使用了第库 constconstpath=require("path");const{DllPlugin}=require("wmodule.exports={entry:react:["react","react-dom"]//!output:path:path.resolve(dirname,"./dll"),filename:"[name].dll.js",library:plugins:newmanifest.jsonpathpath:path.join(dirname,"./dll","[name]-name:]"dev:dll":"dev:dll":ck--config运npmnpmrunl文件包含了大量模块的代码，这些模块被存放在一个数组里。用数组的索引号为ID,通过变量讲自己暴露在全局中，就可以在windxx到其中的模块Manifest.json描述了与其对应的dll.js包含了哪些模块，以及ID和路径要给web项目构建介入动态库，需要完成以下事情将网页依赖的基础模块，打包到单独的动态库，一个动态当需要导入的模块存在于某个动态库中时，不要再次打包，直接用构建好的动态库即可。newmanifest:require("./dll/react-页面依赖的所有动态库都需要被加载<!DOCTYPE<html<metacharset="UTF-8"<metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp- patible" <linkhref="css/main_e2bf39.css"<div<scripttype="text/javascript"<scripttype="text/javascript"npmiadd-asset-html-npmiadd-asset-html-dll.jsindex.html中.wck.base.config.js文件中进行更改

，它newnewfilepath:path.resolve(dirname,'../dll/react.dll.js')对应的dll运行npmnpmrun使用happypack并发执行任运行在Node.之上的Wck是单线程模型的，也就是说Wck需要一个一个地处理任务，不能同时处理多个任务。HappyPack就能让Wck做npmnpmi-DvarhappyThreadPool=HappyPack.ThreadPool({size:5//rules:{test:/\.jsx?$/,use:[{一个loader对应一个loader:}]{test:include:path.resolve(dirname,"./src"),use:["happypack/loader?id=css"]]new////如何处理.js文件，用法和Loader配置中一样threadPool:happyThreadPool,HappyPack({id:"css",loaders:["style-loader","css- x",list:"./src/list",}ckPlugins({template:path.join(dirname,"./src/index/index.html"),使用glob.sync第库来匹配路npmnpmiglob-constglob=constsetMPA=(){constentry=const ckPlugins={entrconst{entry,ckPlugins}=constconstsetMPA=(){constentry=const ckPlugins=constentryFiles=glob.sync(path.join(dirname,entryFiles.map((item,index){constentryFile=constmatch=entryFile.match(/src\/(.*)\/index\.js$/);constpageName=match&&match[1];entry[pageName]=entryFile; ckPlugin({title:pageName,template:path.join(inject:true{entr const{entry,ckPlugins}=module.exports{entry,path:path.resolve(dirname,"./dist"),filename:"[name].js"}plugins:// ]}文件刻告诉者，先缓存起来wck开启模式，有两1.1.启动ck命令式带上--watch参数，启 }ck--2.在配置文件里设置watchtrue//默认false,watchOptions:{ ignored: aggregateTimeout:300,poll:1000}如何自己编写一个自己编写一个Loader的过程是比较简单Loader就是一个函数 式函数，不能用箭头函拿到源代码，作进一步的修饰处理，再返回处理后的源码就可以了文档： 创建一个替换源码中字符串的omodule.exports={console.log(source,this.query);return 在配置文件中使用constpath=require('path')module:{rules:{test:use:path.resolve(dirname,}]module:rules:{use:[{loader:path.resolve(dirname,name:开课}}]}]//const//constloaderUtils=require("loader-module.exports=function(source)//returnsource.replace("kkb",);constoptions=loaderUtils.getOptions(this);constresult=source.replace("kkb",);returnsource.replace("kkb",}this.callback:如何返回多个信息，不止是处理好的源码呢，可以使用constloaderUtilsrequire("loader- module.exports=function(source)constoptions=loaderUtils.getOptions(this);constresult=source.replace("kkb",);this.callback(null,result);:Error|content:string|Buffer,sourceMap?:SourceMap,meta?:anyconstconstloaderUtils=require("loader-module.exports=function(source)constoptions=loaderUtils.getOptions(this);setTimeout(()=>{constresult=source.replace("kkb",return},我们使 constconstloaderUtils=require("loader-module.exports=function(source)constoptions=//callback就是this.callbackconstcallback=this.async();setTimeout(()=>{constresult=source.replace("kkb",);callback(null,result);},多个loader的使 注意顺module.exports=returnsource.replace("开课吧",constloaderUtils=require("loader-utils");module.exports=function(source){constoptions= constcallback=this.async();setTimeout(()=>{constresult=source.repl