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