np比如開(kāi)發(fā)過(guò)程中我們需要通過(guò)模塊化的方式p比如也會(huì)使用一些高級(jí)的特性來(lái)加快我們的開(kāi)發(fā)效率或者安全性，比如通過(guò)ES6+、TypeScript開(kāi)發(fā) p比如開(kāi)發(fā)過(guò)程中，我們還希望實(shí)時(shí) 文件的變化來(lái)并且反映到瀏覽器上，提高開(kāi)發(fā)的效率p比如開(kāi)發(fā)完成后我們還需要將代碼進(jìn)行壓縮、合并以及其他相關(guān)的優(yōu)化pn但是對(duì)于很多的前端開(kāi)發(fā)者來(lái)說(shuō)，并不需要思考這些問(wèn)題，日常的開(kāi)發(fā)中根本就沒(méi) 這些問(wèn)題p這是因?yàn)槟壳扒岸碎_(kāi)發(fā)我們通常都會(huì)直接使用三大框架來(lái)開(kāi)發(fā)：Vue、React、p但是事實(shí)上，這三大框架的創(chuàng)建過(guò)程我們都是借助于腳手架（CLI）p事實(shí)上Vue-CLI、create-react-app、Angular-CLI都是基于w n事實(shí)上我們上面提到的所有腳手架都是依賴于w

n我們先來(lái)看一 的解釋 ckisastaticmodulebundlerformodernJavaScriptn ck是一個(gè)靜態(tài)的模塊化打包工具，為現(xiàn)代的JavaScriptnp打包 ck可以將幫助我們進(jìn)行打包，所以它是一個(gè)打包工p靜態(tài)的static：這樣表述的原因是我們最終可以將代碼打包成最終的靜態(tài)資源（部署到靜態(tài)服務(wù)器p模塊化 ck默認(rèn)支持各種模塊化開(kāi)發(fā) monJS、AMD等p現(xiàn)代的modern：我們前端

nJavaScriptp將ES6轉(zhuǎn)換成ES5pTypeScript的處理，將其轉(zhuǎn)換成nCsspCSSpLess、Sassn資源文件img、 imgp字體fontnHTMLp打包HTMLn處理vue項(xiàng)目的SFC文件.vue

n ck 文檔p ck的中 文檔 ATION：文檔詳情，也是我們最關(guān)注的n ck的運(yùn)行是依賴Node環(huán)境的，所以我們電腦上必須有Node環(huán)境p所以我們需要先安裝Node.js，并且同時(shí)會(huì)安裝npmp我當(dāng)前電腦上的node版本是v14.15.5npm版本是6.14.11（你也可以使用nvm或者n來(lái)管理Node版本）；pNode

n ck的安裝目前分為兩個(gè) ck、 np執(zhí)行 p p而 p所以在安裝w npminstall ck ck-cli–g#npminstall ck ck-cli–D#

n我們可以通過(guò)wck進(jìn)行打包，之后運(yùn)行打包之后p在wck n生成一個(gè)dist文件夾，里面存放一個(gè)main.jspp另外我們發(fā)現(xiàn)代碼中依然存在ES6的語(yǔ)法，比如箭頭函數(shù)、const等，這是因?yàn)槟J(rèn)情況下wck并不清楚我們打包后的文n我們發(fā)現(xiàn)是可以正常進(jìn)行打包的，但是有一個(gè)問(wèn)題，wck是如何確定我們的的呢？p事實(shí)上，當(dāng)我們運(yùn)行wck時(shí)，wck會(huì)查找當(dāng)前下的src/index.js作為；p所以，如果當(dāng)前項(xiàng)目中沒(méi)有存在src/index.js文件，那么會(huì)報(bào)錯(cuò)；n當(dāng)然，我們也可以通過(guò)配置來(lái)指定npxnpx ck--entry./src/main.js--output-path

n前面我們直接執(zhí)行 ck命令使用的是全局的 ck，如果希望使用局部的可以按照下面的步驟來(lái)操作n第一步：創(chuàng)建package.jsonnpmnpmn第二步：安裝局部的 npminstallnpminstall ck ck-cli-n第三步：使用局部的 npxnpx n第四步：在package.json中創(chuàng)建 ，執(zhí) 打包即npmnpmrun

n在通常情況下，w n我們可以在 下創(chuàng)建一個(gè) ck.config.js文件，來(lái)作為 ck的配置文件繼續(xù)執(zhí)行 ck命令，依然可以正常打npmrun

n但是如果我們的配置文件并不是 ck.config.js的名字，而是其他的名字呢p比 ck.config.js修改成了p這個(gè)時(shí)候我們可以通過(guò)--config ck--confign但是每次這樣執(zhí)行命令來(lái)對(duì)源碼進(jìn)行編譯，會(huì)非常繁瑣，所以我們可以在package.json中增加一個(gè)新 之后我們執(zhí)行npmrunbuild

n ckp事實(shí)上 p從 開(kāi)始，會(huì)生成一個(gè)依賴關(guān)系圖，這個(gè)依賴關(guān)系圖會(huì)包含應(yīng)用程序中所需的所有模塊（比如.js文件、css文件、 p然后遍歷圖結(jié)構(gòu)，打包一個(gè)個(gè)模塊（根據(jù)文件的不同使用不同的loader來(lái)解析

n我們創(chuàng)建一個(gè)p通過(guò)JavaScript繼續(xù)編譯命令npmrun

n上面的錯(cuò)誤信息告訴我們需要一個(gè)loader來(lái)加載這個(gè)css文件，但是loaderploader可以用于對(duì)模塊的源代碼p我們可以將css文件也看成是一個(gè)模塊，我們是通過(guò)import來(lái)加載這個(gè)模塊p在加載這個(gè)模塊時(shí) ck其實(shí)并不知道如何對(duì)其進(jìn)行加載 須制定對(duì)應(yīng)的loader來(lái)完成這個(gè)功能n那么我們需要一個(gè)什么樣的loaderp對(duì)于加載css文件來(lái)說(shuō)，我們需要一個(gè)可 css文件的p這個(gè)loader最常用的是css-ncss-loadernpminstallcss-loader-

n如何使用這個(gè)loader來(lái)加載cssppCLI方式 ck5中不再使用pn內(nèi)聯(lián)方式：p在引入的樣式前加上使用的loader，nCLIp在 ck5的文檔中已經(jīng)沒(méi)有了--module-p

n配置方式表示的意思是在我們的 ck.config.js文件中寫(xiě)明配置信息 module.rules中允許我們配置多個(gè)loader（因?yàn)槲覀円矔?huì)繼續(xù)使用其他的loader，來(lái)完成其他文件的加載p這種方式可以更好的表示loader的配置，也方便后期 ，同時(shí)也讓你對(duì)各個(gè)Loader有一個(gè)全局的概覽nmodule.rulesnrulesn數(shù)組中存放的是一個(gè)個(gè)的Rule，Ruleptest屬性：用于對(duì)resource（資源）puse屬性： UseEntry?loader：必須有一個(gè)loader?options：可選的屬性，值是一個(gè)字符串或者對(duì)象，值會(huì)被傳入到loader?query：目前已經(jīng)使用options 傳遞字符串（如：use:['style-loader']）是loader屬性的簡(jiǎn)寫(xiě)方式（如：use:[{loader:'style-loader'}]ploader屬性：Rule.use:[{loader

n我們已經(jīng)可以通過(guò)css-loader來(lái)加載cssp但是你會(huì)發(fā)現(xiàn)這個(gè)css在我們的代碼中并沒(méi)有生效（頁(yè)面沒(méi)有效果）np因?yàn)閏ss-loader只是負(fù)責(zé)將.css文件進(jìn)行解析，并不會(huì)將解析之后的css插入到頁(yè)面p如果我們希望再完成插入style的操作，那么我們還需要另外一個(gè)loader，就是style-n安裝style-npmnpminstallstyle-loader-

n那么我們應(yīng)該如何使用style-p在配置文件中，添加style-p注意：因?yàn)閘oader的執(zhí)行順序是從右向左（或者說(shuō)從下到上，或者說(shuō)從后到前的），所以我們需要將style-n重新執(zhí)行編譯npmrunbuild，可以發(fā)現(xiàn)打包后的cssp當(dāng)前目前我們的cssp后續(xù)我們也會(huì)講如何將css

n在我們開(kāi)發(fā)中，我們可能會(huì)使用less、sass、stylus的預(yù)處理器來(lái)編寫(xiě)cssn那么，如何可以讓我們的環(huán)境支持這些預(yù)處理器p首先我們需要確定，less、sass等編寫(xiě)的css需要通過(guò)工具轉(zhuǎn)換成普通的n比如我們編寫(xiě)如下的less

n我們可以使用lessnpmnpminstallless-nnpxnpxlessc./src/css/title.less

n但是在項(xiàng)目中我們會(huì)編寫(xiě)大量的cssp這個(gè)時(shí)候我們就可以使用less-loader，來(lái)自動(dòng)使用less工具轉(zhuǎn)換less到npmnpminstallless-loader-n配置 執(zhí)行npmrunbuild n什么是PostCSSpPostCSS是一個(gè)通過(guò)JavaScriptp這個(gè)工具可以幫助我們進(jìn)行一些CSS的轉(zhuǎn)換和適配，比如自動(dòng)添加瀏覽器前綴、cssp但是實(shí)現(xiàn)這些功能，我們需要借助于PostCSSn如何使用PostCSSp第一步：查找PostCSS在構(gòu)建工具中的擴(kuò)展，比如 ck中的postcss-p第二步：選擇可以添加你需要的PostCSS n當(dāng)然，我們能不能也直接在終端使用PostCSSp也是可以的，但是我們需要單獨(dú)安裝一個(gè)工具postcss-n我們可以安裝一下它們：postcss、postcss-npminstallpostcsspostcss-cli-n我們編寫(xiě)一個(gè)需要添加前綴的csspp我們可以在上面 中詢一些添加css屬性的樣式； n因?yàn)槲覀冃枰砑忧熬Y，所以要安裝npmnpminstallautoprefixer-n直接使用使用postcss工具，并且制定使用npxnpxpostcss--useautoprefixer-oend.cssn轉(zhuǎn)化之后的css n真實(shí)開(kāi)發(fā) 然不會(huì)直接使用命令行工具來(lái)對(duì)css進(jìn)行處理，而是可以借助于構(gòu)建工具p在 ck中使用postcss就是使用postcss-loader來(lái)處理的n我們來(lái)安裝postcss-npmnpminstallpostcss-loader-n我們修改加載css的loader：（配置文件已經(jīng)過(guò)多，給出一部分了p注意：因?yàn)閜ostcss需要有對(duì)應(yīng)的插件才會(huì)起效果，所以我們需要配置它的 np在 下創(chuàng)建 n事實(shí)上，在配置postcss-loader時(shí)，我們配置插件并不需要使用autopr