Wck-wck支持第字體第二個(gè)作業(yè)，實(shí)現(xiàn)vue開發(fā)環(huán)loader:?le-loaderloader:?le-原理是把打包中識(shí)別出的資源模塊，移動(dòng)到輸 ，并且返回一個(gè)地址名場(chǎng)景：就是當(dāng)我們需要模塊，僅僅是從源代碼挪移到打 ，就可以使用?le-loader來(lái)處理txt，svg，csv，excel，資源啦等npmnpminstallfile-loader-modulemodule:rules:{test:useuse:loader:"file- options:{ceholdername:outputPath"images/"}}}]importimportpicfromvarimg=newImage();img.src=pic;varroot處理字體 @font-facefont-family:"webfont"; y:swap;src:url("webfont.woff2")}bodybackground:font-family:"webfont"}{test:use:"file-}url-loader?le-loaderurlloader了le-loader,所以可以處理?le-loader所有的事情，但是遇到j(luò)pg格式的模塊，會(huì)把該轉(zhuǎn)換成base64格式字符串，并打包到j(luò)s里。對(duì)小體積的比較合適，大不合適npmnpminstallurl-loader-案例modulemodule:rules:{test:/\.(png|jpe?g|gif)$/,use:{loader:"url-loader",options:{name:"[name]_[hash].[ext]",outputPath:"images/",limit:2048}}}]樣式處理：Css- 分析css模塊之間的關(guān)系，并合成一個(gè)npmnpminstallstyle-loadercss-loader-{{test:use:["style-loader","css-}{options:{injectType:"singletonStyleTag"http://將所有的 }}Less樣式less-load把less語(yǔ)法轉(zhuǎn)換成$$npminstalllessless-loader--save-案例{{test:use:["style-loader","css-loader","less-} Postcss-npmnpmipostcss-loaderautoprefixer-新建{{test:use:["style-loader","css-loader","postcss-module.exports={plugins:[overrideBrowserslist:["last2versions",]loader處理wck不支持的格式文件，模塊wck的打程是有（生命周期概念）鉤擴(kuò)展插件，在Wck構(gòu)建流程中的特定時(shí)機(jī)注入擴(kuò)展邏輯來(lái)改變構(gòu)建結(jié)果或做你想要的事情。HtmlW中npmnpminstall--save-devhtml-配置title:title:用來(lái)生成頁(yè)面的titlefilename:輸出的HTML文件名，默認(rèn)是index.html,也可以直接配置帶有 te:模板文件路徑，支持加載?，比如inject:true|'head'|'body'|false,注入所有的資源到特定的 te或 teContent中，如果設(shè)置為true或者body，所有的javascript資源將被放置到元素的底部，'head'將放置到headfavicon:添加特定的favicon路徑到輸出的HTML文件中。minify:{}|false,傳遞html-minifier選項(xiàng)給minify輸出hash:true|false,如果為true,將添加一個(gè)唯一的CSS文件，對(duì)于解除cacheck編譯hash和cachetrue|false，如果為trueshowErrors:true|false,如果為true,這是默認(rèn)值，錯(cuò)誤信息會(huì)寫入到HTMLchunks:允許只添加某些塊(比如，僅僅unittest塊chunksSortMode:允許控制塊在添加到頁(yè)面之前的排序方式，支持的值：'none'|'default'excludeChunks:允許跳過(guò)某些塊，(比如，跳過(guò)單元測(cè)試的塊案例constconstpath=const ckPlugin=require("html-module.exports=plugins:[ ckPlugin({title:"MyApp",filename: te:]<!DOCTYPE<html<metacharset="UTF-8"<metaname="viewport"content="width=device-width,initial-scale=1.0"<metahttp- patible"content="ie=edge"<title><%= ckPlugin.options.title<divnpmnpminstall--save-devclean-constconst{ckPlugin}=require("clean-plugins:new]constconst tractPlugin=require("mini-css-extract-{test:use: tractPlugin.loader,"css-}new filename:wck5.x減少hash的概在dev模式中，默認(rèn)開啟，關(guān)閉的話可以在配置文件里devtool的介紹：?guration/devtool#devtoolsource-map：產(chǎn)生.mapcheap:較快Module：第模塊，包含loader的sourcemap（比如jsxtojs，babel的inline：將.map作為DataURI.map文件devtool:"cheap-module-eval-source-mapdevtool:"cheap-module-eval-source-map開發(fā) //線上生成配W提升開發(fā)效率的利每次改完代碼都需要重新打包一次，打開瀏覽?，刷新一次，很麻煩,npminstallnpminstallck-dev-server-配修改下"scripts":"scripts":"server":devServer:devServer:contentBase:"./dist",open:true,port:啟npmnpmrun 我們前端就可以本地mock數(shù)據(jù)，不打斷字啟動(dòng)一個(gè)服務(wù)?，mock一個(gè)接////npmiexpress-創(chuàng)建一個(gè)server.js修改scripts"server":"nodeconstexpress=constapp=app.get('/api/info',(req,res)=>{//node項(xiàng)目中安裝axios//npm//npmiaxios-importaxiosfrom'axios'::"/api":{target:"}"}修改axios.get("/api/info").then(resaxios.get("/api/info").then(res{HotModuleRecement(HMR:熱模塊替換不支持出的css我們要使用css-loaderdevServer:devServer:contentBase:"./dist",open:true,配置文件頭部引入w//const//constpath=//const//constckPlugin=require("html- ckPlugin=require("clean-constck=pluginsplugins:newCleanW newHtmlW newte:案例importvarbtnbtn.innerHTML"新增btn.onclick=function()vardiv= div.innerHTML="item";{background:注注意啟動(dòng)HMR后 處理js模塊需要使用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){module.hot.accept("./b",function() ;}Babel處理：中文 abel是Javacrp編譯?，能將ES6代碼轉(zhuǎn)換成ES5代碼，讓我們開發(fā)過(guò)程中放心使用S新特性而不用擔(dān)心兼容性問(wèn)題。并且還可以通過(guò)插件機(jī)制根據(jù)需求靈活的擴(kuò)展。Babel在執(zhí)行編譯的過(guò)程中，會(huì)從項(xiàng)目 下的.babelrcJSON文件中配置。沒(méi)有該文件會(huì)測(cè)試代constarr=[newPromise(()=>{}),newPromise(()=>arr.map(item=>{安npminpmibabel-loader@babel/core@babel/preset-env-ck與babel的通信橋梁，不會(huì)做把es6轉(zhuǎn)成es5的工作，這部分Ecma5678草案（評(píng)審?fù)ㄟ^(guò)的，還有未通過(guò)的）ecmaecmaecmaecma。。}W{{test:exclude:/node_modules/,use:{loader:"babel-loader",options:{presets:["@babel/preset-}}}npmnpminstall--save//index.js//index.jsimport按需加載，減少冗會(huì)發(fā)現(xiàn)打包的體積大了很多，這是因?yàn)閜olyll默認(rèn)會(huì)把所有特性注入進(jìn)來(lái)，假如我用到的es6+會(huì)注入，沒(méi)用到的不注入，從而減少打包的體積，可不可以呢修改Woptionsoptions:presets:[{{edge:firefox:chrome:safari:corejs:2,//新版本需要指 useBuiltIns"entry"http://按需注}]]}useBuiltInsbabel7babel@babel/polyfill個(gè)參數(shù)可以使用：①entry:需要在wck的文件里import"@babel/polyfill"一次。babel會(huì)根據(jù)你的使用情況導(dǎo)入墊片，沒(méi)有使用的功能不會(huì)被導(dǎo)入相應(yīng)的墊片。②usage:不需要import，全自動(dòng)檢測(cè)，但是要安裝@babel/polyfill。（試驗(yàn)階段）③false:如果你import"@babel/polyfill，它不會(huì)排除掉沒(méi)有使用的墊片，程序體積會(huì)龐大。(不推薦)usagebabel-transform-runtime，不會(huì)造成全局污染，因此也會(huì)不會(huì)對(duì)類似Atotype.includes()進(jìn)行poly?ll。擴(kuò)展{presets:[{{edge:firefox:chrome:safari:corejs:2,//新版本需要指 useBuiltIns"usage//按需注}]]}{test:exclude:loader:"babel-}安npmnpminstallreactreact-dom--importReact,{Component}fromimportReactDomfrom"react-classAppextendsComponent{render(){return o}}ReactDom.render(<App npmnpminstall--save-dev@babel/preset-{{"presets":[{{"edge":"firefox":"chrome":"safari":"useBuiltIns":"usage",//按需注}]}}如果是庫(kù)的作者的話，提供模塊的時(shí)候代碼怎么打包的？構(gòu)建速度會(huì)越來(lái)越慢，怎么優(yōu)化擴(kuò)展多頁(yè)面打包通用方}newtitle: te:path.join(dirname,"./src/index/index.html"),使用glob.sync第庫(kù)來(lái)匹配路npmnpmiglob-constglob=constsetMPA=()=>{constentry={};const ckPlugins=return{ const{entry, ckPlugins}=constconstsetMPA=()=>{constentry={};const ckPlugins=constentryFiles=glob.sync(path.join(dirname,"./src/*/index.js"));entryFiles.map((item,index)=>{constentryFile=constmatch=entryFile.match(/src\/(.*)\/index\.js$/);constpageName=match&&match[1];entry[pageName]=entryFile; ckPlugin({ te:path.join(dirname,`src/${pageName}/index.html`),filename:`${pageName}.html`,chunks:[pageName],inject:true{ const{entry,ckPlugins}=modulemodule.exports{entry,path:path.resolve(dirname,"./dist"),filename:"[name].js"}plugins://