webpack入門及踩坑應對指南

ky0ncheng 發布于2019-08-22 16:20 / 3311人閱讀

摘要：的使用為什么使用前端需要工程化工程化的概念小作坊流水線流水線的特點自動化，模塊化性能優化自動化就是命令行操作，一行命令實現多個功能，例如自動監聽變化，自動翻譯源代碼到打包代碼庫里面文件復雜多樣文件多變化快將各種文件集

webpack的使用

為什么使用webpack

1.前端需要工程化

工程化的概念： 小作坊 -> 流水線
流水線的特點：自動化，模塊化、性能優化

自動化就是命令行操作，一行命令實現多個功能，例如自動監聽變化，自動翻譯源代碼到打包代碼庫里面

2.文件復雜多樣

css/js/html/img/svg 文件多

css-less-sass-scss-stylus
js - coffee - es6 - typescript - babel
html - jade - pug - slim 變化快

將各種文件集合到一起，看成一個模塊，通過模塊來打包，這就是webpack的優勢之處。

css loader一直報錯

webpack的配置堪稱玄學，報錯了無法找到原因，推薦你這樣做，且建議不參考別人的配置，最好參考官方的配置例子，這樣碰到錯誤還可以在github的issue上進行提問和尋找解決方法

你需要首先刪除掉node_modules所有的內容

然后重新安裝依賴npm install

都不行的話，你需要尋找readme的不同之處，例如css-loader中，不同版本加載的loader也不相同

關于webpack中loader的學習，可以參加阮一峰的文章和學習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

此外，有個簡寫命令可以執行webpack命令，執行局部目錄的webpack可以改成這樣npx webpack

2.webpack中的關鍵目錄

./ 當前目錄
src source 未經翻譯原始代碼的文件夾
dist distribution 發布代碼文件夾
node_modules/vendors 第三方代碼文件夾

3.自動添加前綴的loader autoprefixer

4.報錯提示找不到某個模塊，cannt find "module"，就安裝這個模塊npm install module，絕大多數情況下是有效的，當報錯信息變化了說明這個解決方法是有效的，

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94251.html

vue-cli3.x 新特性及踩坑記

摘要：前言都到了，所以是時候玩轉一下的新特性了。安裝的包名稱由改成了。方法一原因的配置改變了，導致正確的不能用。打開終端，切換到根路徑文件里面修改為方法二是默認路徑修改了路徑會出現錯誤。按上面的方法修改完，再全局卸載果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

xiaoqibTn 2019-08-23 12:01 評論0 收藏0
全局拖拽上傳文件（類似百度網盤）的實現及踩坑

摘要：記錄下，開發需求是實現一個類似百度網盤全局拖拽的功能兼容瀏覽器，以上。監聽上的事件，顯示拖拽的蒙層監聽目標節點上的拖拽事件。記錄下，開發需求是實現一個類似百度網盤全局拖拽的功能,兼容瀏覽器，IE0以上。實現思路是，采用原聲的拖拽事件。監聽window上的dragenter事件，拖拽目標節點是fixed罩住頁面的dropZone節點。監聽window上的dragenter事件，顯示...

shiguibiao 2019-08-26 11:41 評論0 收藏0
Vue + TypeScript + Element 項目實踐(簡潔時尚博客網站)及踩坑記

摘要：前言本文講解如何在項目中使用來搭建并開發項目，并在此過程中踩過的坑。具有類型系統，且是的超集，在年勢頭迅猛，可謂遍地開花。年將會更加普及，能夠熟練掌握，并使用開發過項目，將更加成為前端開發者的優勢。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言本文講解如何在 Vue 項目中使用 TypeScript...

luckyyulin 2019-08-26 13:39 評論0 收藏0
vue 開發中遇到的問題匯總（踩坑指南）

摘要：組件中使用定時器及銷毀問題如果我們在頁面中使用了一個定時器，當從頁面跳轉到頁面時，如果不手動清除這個定時器，那么它仍舊會執行，這不是我們所期望的。公司年初開始從jquery轉型到vue開發，思想上從jquery的操作DOM到vue的操作數據，剛開始還不太習慣，但用了一段時間發現確實比較方便。在剛開始用vue的時候，也踩了一些坑，現在分享出來，供剛入門上手開發vue的朋友參考，都是一些...

wean 2019-08-20 18:52 評論0 收藏0
webpack v2升級踩坑筆記

摘要：從再到目前當紅明星，前端模塊打包技術日新月異，在今年月份和月份左右接連更新了和版本為了減少冗余模塊，縮減文件大小，中也加入了關于的特征，可以查看知乎如何評價新引入的代碼優化技術的討論。從Grunt->gulp->webpack,再到目前當紅明星rollup，前端模塊打包技術日新月異，webpack在今年1月份和6月份左右接連更新了v2和v3版本,為了減少冗余模塊，縮減bundle文件...

JayChen 2019-08-20 17:59 評論0 收藏0