爲何使用webpackcss
1.前端須要工程化html
工程化的概念: 小做坊 -> 流水線
流水線的特色:自動化,模塊化、性能優化
自動化就是命令行操做,一行命令實現多個功能,例如自動監聽變化,自動翻譯源代碼到打包代碼庫裏面前端
2.文件複雜多樣node
將各類文件集合到一塊兒,當作一個模塊,經過模塊來打包,這就是webpack的優點之處。webpack
webpack的配置堪稱玄學,報錯了沒法找到緣由,推薦你這樣作,且建議不參考別人的配置,最好參考官方的配置例子,這樣碰到錯誤還能夠在github的issue上進行提問和尋找解決方法git
node_modules
全部的內容npm install
readme
的不一樣之處,例如css-loader中,不一樣版本加載的loader也不相同關於webpack中loader的學習,能夠參加阮一峯的文章和學習demoes6
css loader
githubgithub
1.全局安裝VS局部安裝web
全局安裝:npm install -g http-server
,安裝目錄爲user/local/.bin/
,安裝在全局目錄下typescript
局部安裝:安裝在局部目錄下,./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
,絕大多數狀況下是有效的,當報錯信息變化了說明這個解決方法是有效的,