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
奇技淫巧
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，絕大多數情況下是有效的，當報錯資訊變化了說明這個解決方法是有效的，