开课吧全栈架构师第16期2020完结webpack day

ck-loader:file-loaderloader:file-原理是把打包中识别出的资源模块，移动到输出 就可以使用file-loader来处理，txt，svg，csv，excel，资npmnpminstallfile-loader-modulemodule:rules:{test:use:loader:"file- options:{ ceholder占位 name:}}}]importimportpicfromvarimg=newImage();img.src=pic;varroot处理字体 @font-face y:swap;src:url("webfont.woff2")}bodybackground:font-family:"webfont"}{test:use:"file-}url-loaderfile-loaderurl-loader了le-oder,所以可以处理er所有的事，但遇到格式模块会把该换成ase64格式字串，打包到里。小体的比较适，大不合适。npmnpminstallurl-loader-modulemodule:rules:{use:{options:{outputPath:"images/",limit:2048}}}]Style-loader会把css-loader生成的内容，以stylenpmnpminstallstyle-loadercss-loader-{{test:use:["style-loader","css-}{options:{injectType:"singletonStyleTag"//将所 }}less-load把less语法转换成$$npminstalllessless-loader--save-{{test:} Postcss-npmnpmipostcss-loaderautoprefixer-新建{test:useuse:["style-loader","css-loader","postcss-module.exports={plugins:ist:["last2versions",]loader处理wck不支持的格式文件，模块wck的打程是有（生命周期概念）钩plugin可以在wck运行到某个阶段的时候，帮你做一些事情，扩展插件，在Wck构建流程中的特定时机注入扩展逻辑来改npmnpminstall--save-devhtml-title:用来生成页面的titlefilename:输出的HTML文件名，默认是index.html,也可以直 inject:true|'head|'body'|false,注入所有的资源到特定的temte或者temteContent中，如果设置为true或者body，所有的javascript资源将被放置到body元素的底部，'head'将放置到head元素中。favicon:添加特定的favicon路径到输出的HTML文件中。minify:|false传递html-minifier选项给minifyhash:true|false,如果为true,将添加一个唯一的wck编译hash到所有包含的和CSS文件，对于解除cache很有用。cache:true|false，如果为true,这是默认值，仅仅在文件showErrors:true|false如果为true这是默认值，错误信息会写入到HTML页面中chunks:允许只添加某些块(比如，仅仅unittest块)的值：'none|'default|{function}-default:'auto'excludeChunks:允许跳过某些块，(比如，跳过单元测试的块)constconstpath=constckPlugin=require("html-module.exports=plugins:[htmlWckPlugin({title:"MyApp",filename:temte:]<!DOCTYPE<html<metacharset="UTF-8"<metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv=" content="ie=edge"/> <divclean- ck-npmnpminstall--save-devclean-constconst{ckPlugin}= plugins:new]mini-css-extract-constconst{test:use: }newfilename:wck5.x减少hash的概source-map：产生.map文件Module：第模块，包含loader的sourcemap（比如jsxtojsinline：将.map作为DataURI嵌入，不单独生成.map文件 烦,我们可以安装使用wckdevserver来改善这块的体验npmnpminstallck-dev-server-修改下"scripts":"scripts":"server":devServer:devServer:open:true,port:npmnpmrun //npmiexpress-//npmiexpress-创建一个server.js修改scriptsconstexpress=constapp=//node//npm//npmiaxios-importaxiosfrom'axios'修改wck.config.js设置服务器代::"/api":{target:"}"}修改{HotModuleRe cement(HMR:热模块devServer:devServer:open:true,//const//constpath=//constHtmlW//constckPlugin=require("html-constck=pluginsplugins:newHtmlWnewte:importvarbtnbtn.innerHTML"新增btn.onclick=function()vardiv= div.innerHTML="item";{background:需要使用module.hot.acceptfunctioncounter(){vardiv= div.setAttribute("id","counter");div.innerHTML=1;div.onclick=function()div.innerHTML=parseInt(div.innerHTML,10)+}exportdefaultfunctionnumber(){vardiv= div.setAttribute("id","number");div.innerHTML=13000;}exportdefaultimportcounterfromimportnumberfromif(module.hot)}Babel处理：中文 constarr=[newPromise(()=>{}),new=>arr.map(item=>{npminpmibabel-loader@babel/core@babel/preset-env-ck与babel的通信桥梁，不会做把es6Ecma5678...草案（评审通过的，还有未通过的）ecmaecmaecmaecma}{{test:use:{options:{}}}Babel只支持let等一些基础的特性npmnpminstall--saveimport会发现打包的体积大了很多，这是因为polyfill默认会把所有特性注optionsoptions:presets:[{{edge:firefox:chrome:safari:}]]}useBuiltIns选项是babel7的新功能，这个选项告诉babel如何配置@babel/polyfill。它有三个参数可以使用：①entry:需要在w ck的文件里import"@babel/polyfill"一次。babel会根据你的使用情况导入垫片，没有使用的功能不会被usage不需要import，全自动检测，但是要安装@babel/polyfill。（试验阶段）③false:如果你import请注意：usage的行为类似babel-transform-runtime，不会造成全局污染，因此也会不会对类似Atotype.includes()进行{[[{{edge:firefox:chrome:safari:corejs:2,//新版本需要指定库版useBuiltIns"usage}]]} {test:exclude:/node_modules/,loader:"babel-loader"}配置Reactnpmnpminstallreactreact-dom--importReact,{Component}fromimportReactDomfrom"react-classAppextendsComponent{render(){return o}} npmnpminstall--save-dev@babel/preset-{{"presets":[{"targets":"edge""edge":"firefox":"chrome":"safari":}]}}newtitle: te:path.join(dirname,

使用glob.sync第库来匹配路npmnpmiglob-constglob=constsetMPA=()=>{constentry={};const ckPlugins=return{const{entry,ckPlugins}=constconstsetMPA=()=>{constentry={};const ckPlugins=constentryFiles=glob.sync(path.join(entryFiles.map((item,index)=>constentryFile=entryFiles[index];constmatch=constpageName=match&&match[1];entry[pageName]=entryFile;htmlWckPlugin({title:pageName,temte:path.join(filename:`${pageName}.html`,chunks:[pageName],inject:{ const{entry, ckPlugins}=module.exports{entry,path:path.resolve(dirname,filename:}plugins:////]}polloyllgnrune，它npmnpminstall--save-dev@babel/plugin-transform-npminstall--saveoptions:[{{edge:firefox:chrome:safari:useBuiltIns:"usage",corejs:2}]"plugins":[{"absoluteRunti