Webpack學習筆記

自我總結: 如其名，一些入口處的引導檔案

定義：output 位於物件最頂級鍵(key)，包括了一組選項，指示 webpack 如何去輸出、以及在**輸出你的「bundle、asset 和其他你所打包或使用 webpack 載入的任何內容」。

自我總結：這個也沒什麼說的，如其名，定義了最終生成檔案的位址以及其他選項

自我總結: 這個選項是對你的**做預受理(preprocessors),就是在生成bundle.js之前對**做處理，比如：babel-loader: es6或7轉es5之類的活都由loader們去做。這個選項之所以存在是因為webpack不知道如何去處理他不認識的比如image、ts等等的檔案，但是loader知道如何去處理，所以這部分工作就交給loader了。

ps: 1、 由於從webpack從1公升級到2,我們也需要注意loaders已經因為相容性的問題被公升級成了rules。另外就是執行順序的說法也困擾了我好久，不過最後從專案中慢慢試出來了。由於rules是個物件，根本就不存在什麼順序問題，但是在use陣列中，這個 就存在順序問題了，而且順序蠻奇怪的，是從下到上(from bottom to top),從右向左（from right to left）,跟我們平時的認知是不一樣的

2、 還有乙個管道的概念：用 ！鏈結的loader可以這樣寫 ->css-loader!sass-loader意思就是先通過sass-loader去載入，然後出來的結果再去css-loader去載入，執行的順序也是從右到左

* 這個loader其實是這樣的，它其實很好的印證了webpack不會幹一些他不知道的東西，讓loader們來做

* 裝載json檔案的loader

* 返回內容格式為string的檔案

自我總結：大多數情況他們都是後處理器(post processes)，意味著bundle.js已經生成，然後對檔案做一些混淆和壓縮啊等等的工作。實際上這個選項是非常強大的，通常loader做不了的，都交給plugins去做，並且它的許可權相當的高，他有能力進入整個webpack的編譯生命週期。

定義：快取生成的 webpack 模組和 chunk，來改善構建速度。快取預設在觀察模式(watch mode)啟用。禁用快取只需簡單傳入：cache: false

定義：這個是個在發開模式下特別有用的小型伺服器，以nodejs中的express搭建的，所以你可以配置他們

webpack 學習筆記

學習資源來自前端工程化 webpack.html 課程專題 使用webpack搭建生產環境工作流.html 這兩個教程必須同時看著，互相補充。impot和 export是es6新語法，需要用babel轉一下，直接執行不了 配置webpack.config.js時候，需要引入path模組。1 例 co...

webpack學習筆記

babel loader 它是使babel與webpack協同工作的模組 babel core 顧名思義，它是babel編譯器的核心模組 babel preset env 它是babel官方推薦的預置器，可根據使用者設定的目標環境自動新增所需的外掛程式和補丁來編譯es6 babel loader支援...

webpack學習筆記（四）

當前優化 配置本地開發環境 引入webpack dev server 區分開發環境和生產環境 tips node sass可能出現安裝不成功的情況，請使用cnpm並且刪除依賴重試 npm install npm run build 路徑.webpack.dev.config.js const pat...