webpack處理項目中的資源檔

標籤：引用   nbsp   conf   reset   bpa   json   --   非同步   package   

loader：可同步可非同步，可在nodejs裡使用，可帶參數，可讓webpack去執行它不支援的東西 例如我們之前用到的style-loader，常用的方式是在webpack.config.js中加loader配置

安裝babel-loader： npm install --save-dev babel-loader babel-core

3.安裝 latest：nmp install --save-dev babel-preset-latest

4.可在package.json裡配置latest，也可直接寫在webpack.config.js裡

　　"label":{

　　　　"presets":["latest"]

　　}

5.處理一些css中不容易被瀏覽器解析的東西我們需要安裝後處理器  npm install postcss-Loader --save-dev

postcss外掛程式 autoprefixer npm install autoprefixer --save-dev

6.處理less檔案 需要安裝 npm i  less-loader --save-dev 

7.處理靜態html模版檔案 需要安裝 npm install html-loader --save-dev

8.處理ejs模版檔案 需要安裝 ejs-loader,並且在webpack-config檔案裡配置該loader

9.處理圖片檔案安裝  file-loader

　　9.1:處理css中引入的圖片

　　9.2：處理img的方式引入的圖片

　　9.3：組件中引用圖片（如果非要使用 相對路徑需要${require(‘../img/aa.png‘)}）

10.安裝 url-loader，類似於file loader 但是他可以指定一個limit參數，當你的檔案和圖片大於你指定的limit的時候 它會給file loader執行，當你的檔案小於limit的時候 它會自動轉換成一個base64的編碼

11.image-webpack-loader 壓縮圖片，但是必須結合url-loader或者file-loader一起使用

webpack處理項目中的資源檔