資訊專(zhuān)欄INFORMATION COLUMN
摘要：的使用為什么使用前端需要工程化工程化的概念小作坊流水線(xiàn)流水線(xiàn)的特點(diǎn)自動(dòng)化，模塊化性能優(yōu)化自動(dòng)化就是命令行操作，一行命令實(shí)現(xiàn)多個(gè)功能，例如自動(dòng)監(jiān)聽(tīng)變化，自動(dòng)翻譯源代碼到打包代碼庫(kù)里面文件復(fù)雜多樣文件多變化快將各種文件集
webpack的使用
為什么使用webpack
1.前端需要工程化
工程化的概念： 小作坊 -> 流水線(xiàn)
流水線(xiàn)的特點(diǎn)：自動(dòng)化，模塊化、性能優(yōu)化
自動(dòng)化就是命令行操作，一行命令實(shí)現(xiàn)多個(gè)功能，例如自動(dòng)監(jiān)聽(tīng)變化，自動(dòng)翻譯源代碼到打包代碼庫(kù)里面
2.文件復(fù)雜多樣
css/js/html/img/svg 文件多
css-less-sass-scss-stylus
js - coffee - es6 - typescript - babel
html - jade - pug - slim 變化快
將各種文件集合到一起，看成一個(gè)模塊，通過(guò)模塊來(lái)打包，這就是webpack的優(yōu)勢(shì)之處。
css loader一直報(bào)錯(cuò)webpack的配置堪稱(chēng)玄學(xué)，報(bào)錯(cuò)了無(wú)法找到原因，推薦你這樣做，且建議不參考別人的配置，最好參考官方的配置例子，這樣碰到錯(cuò)誤還可以在github的issue上進(jìn)行提問(wèn)和尋找解決方法
你需要首先刪除掉node_modules所有的內(nèi)容
然后重新安裝依賴(lài)npm install
都不行的話(huà)，你需要尋找readme的不同之處，例如css-loader中，不同版本加載的loader也不相同
關(guān)于webpack中l(wèi)oader的學(xué)習(xí)，可以參加阮一峰的文章和學(xué)習(xí)demo
css loader
github
1.全局安裝VS局部安裝
全局安裝：npm install -g http-server，安裝目錄為user/local/.bin/，安裝在全局目錄下
局部安裝：安裝在局部目錄下，./node_modules/.bin,需要通過(guò)文件前綴才可以訪(fǎng)問(wèn)得到
例如你想用webpack來(lái)打包代碼
全局： webpack main.js bundle.js
局部： ./node_modules/.bin/webpack main.js bundle.js
此外，有個(gè)簡(jiǎn)寫(xiě)命令可以執(zhí)行webpack命令，執(zhí)行局部目錄的webpack可以改成這樣npx webpack
2.webpack中的關(guān)鍵目錄
./ 當(dāng)前目錄
src source 未經(jīng)翻譯原始代碼的文件夾
dist distribution 發(fā)布代碼文件夾
node_modules/vendors 第三方代碼文件夾
3.自動(dòng)添加前綴的loader autoprefixer
4.報(bào)錯(cuò)提示找不到某個(gè)模塊，cannt find "module"，就安裝這個(gè)模塊npm install module，絕大多數(shù)情況下是有效的，當(dāng)報(bào)錯(cuò)信息變化了說(shuō)明這個(gè)解決方法是有效的，
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94251.html
摘要：前言都到了，所以是時(shí)候玩轉(zhuǎn)一下的新特性了。安裝的包名稱(chēng)由改成了。方法一原因的配置改變了，導(dǎo)致正確的不能用。打開(kāi)終端，切換到根路徑文件里面修改為方法二是默認(rèn)路徑修改了路徑會(huì)出現(xiàn)錯(cuò)誤。按上面的方法修改完，再全局卸載果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....
摘要：記錄下，開(kāi)發(fā)需求是實(shí)現(xiàn)一個(gè)類(lèi)似百度網(wǎng)盤(pán)全局拖拽的功能兼容瀏覽器，以上。監(jiān)聽(tīng)上的事件，顯示拖拽的蒙層監(jiān)聽(tīng)目標(biāo)節(jié)點(diǎn)上的拖拽事件。 記錄下，開(kāi)發(fā)需求是實(shí)現(xiàn)一個(gè)類(lèi)似百度網(wǎng)盤(pán)全局拖拽的功能,兼容瀏覽器，IE0以上。實(shí)現(xiàn)思路是，采用原聲的拖拽事件。監(jiān)聽(tīng)window上的dragenter事件，拖拽目標(biāo)節(jié)點(diǎn)是fixed罩住頁(yè)面的dropZone節(jié)點(diǎn)。 監(jiān)聽(tīng)window上的dragenter事件，顯示...
摘要：前言本文講解如何在項(xiàng)目中使用來(lái)搭建并開(kāi)發(fā)項(xiàng)目，并在此過(guò)程中踩過(guò)的坑。具有類(lèi)型系統(tǒng)，且是的超集，在年勢(shì)頭迅猛，可謂遍地開(kāi)花。年將會(huì)更加普及，能夠熟練掌握，并使用開(kāi)發(fā)過(guò)項(xiàng)目，將更加成為前端開(kāi)發(fā)者的優(yōu)勢(shì)。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言 本文講解如何在 Vue 項(xiàng)目中使用 TypeScript...
摘要：組件中使用定時(shí)器及銷(xiāo)毀問(wèn)題如果我們?cè)陧?yè)面中使用了一個(gè)定時(shí)器，當(dāng)從頁(yè)面跳轉(zhuǎn)到頁(yè)面時(shí)，如果不手動(dòng)清除這個(gè)定時(shí)器，那么它仍舊會(huì)執(zhí)行，這不是我們所期望的。 公司年初開(kāi)始從jquery轉(zhuǎn)型到vue開(kāi)發(fā)，思想上從jquery的操作DOM到vue的操作數(shù)據(jù)，剛開(kāi)始還不太習(xí)慣，但用了一段時(shí)間發(fā)現(xiàn)確實(shí)比較方便。在剛開(kāi)始用vue的時(shí)候，也踩了一些坑，現(xiàn)在分享出來(lái)，供剛?cè)腴T(mén)上手開(kāi)發(fā)vue的朋友參考，都是一些...
摘要：從再到目前當(dāng)紅明星，前端模塊打包技術(shù)日新月異，在今年月份和月份左右接連更新了和版本為了減少冗余模塊，縮減文件大小，中也加入了關(guān)于的特征，可以查看知乎如何評(píng)價(jià)新引入的代碼優(yōu)化技術(shù)的討論。 從Grunt->gulp->webpack,再到目前當(dāng)紅明星rollup，前端模塊打包技術(shù)日新月異，webpack在今年1月份和6月份左右接連更新了v2和v3版本,為了減少冗余模塊，縮減bundle文件...
閱讀 783·2021-11-16 11:44
閱讀 3636·2019-08-26 12:13
閱讀 3289·2019-08-26 10:46
閱讀 2416·2019-08-23 12:37
閱讀 1258·2019-08-22 18:30
閱讀 2596·2019-08-22 17:30
閱讀 1902·2019-08-22 17:26
閱讀 2351·2019-08-22 16:20
