6.webpack loader
6.1預設情況下 webpack 只能對js進行打包，因為只有js有模組的概念
6.2開發過程中，我們可能會打包css 等檔案，那麼就得使用相應的loader，讓這些檔案也被 模組化
以便於webpack能夠識別並打包
7.file-loader:【注：簡單拷貝的檔案都可以用。例如：字型圖示，只需要改變正規表示式即可】
作用：將require
()或者import匯入的檔案 輸出到目標資料夾，並將打包後 的路徑賦值給url
配置：打包不改變名稱 name:
[name]
.[ext]
指定相對於輸出目錄的輸出目錄 outputpath:
'相對路徑'
指定託管目錄： publicpath:
'**'
8.url-loader:
②如果被轉超過了指定limit大小，則像file-loader一樣，
將輸出到目標資料夾並將路徑賦值給用到的地方
配置：指定限制大小： l004imit:數字
打包不改變名稱 name:
[name]
.[ext]
指定相對於輸出目錄的輸出目錄 outputpath:
'相對路徑'
9.css-loader:
[通常和style-loader使用]
作用：解析require、import、@import匯入的css檔案之間的依賴關係
10.style-loader：
作用：將css檔案轉為style標籤 並 插入到html的head標籤中
11.loader執行順序：從右至左，從下至上
12.less-loader[通常和css-loader、style-loader配合使用]
: 作用：將less檔案編譯為css檔案
13.scss-loader[通常和css-loader、style-loader配合使用]
: 作用：將scss檔案編譯為css檔案
14.postcss:webpack一款轉換css檔案的工具
作用：利用外掛程式將已經編寫好的css檔案進行一些轉換的工具；【例如：將px轉換為rem；新增各個瀏覽器私有字首】
常用外掛程式：postcss-pxtorem
autoprefix
注：需要安裝 postcss-loader 並新增postcss.config.js配置檔案
15.html-withimg-loader:
作用：打包html中引用到的【css中用到的可以用file-loader或者url-loader】
webpack的畫素轉vw單位的loader外掛程式
安裝 npm i px2vw view loader配置 按以下loader格式，新增進入webpack配置檔案，實現從px轉換成vw，適用於移動端專案 module 也支援聚合的寫法 module 引數 引數名 預設值 備註 viewportwidth 750 設計稿寬度，單位畫素 viewpor...
前端學習之webpack
yarn webpack mode 模式可以切換webpack的打包模式，也可以在配置檔案中設定 production模式會優化打包的結果 development 模式會優化打包的速度 none模式會執行最原始的webpack配置，不做任何額外的處理 webpack內部的loader只能處理js檔案...
webpack常用選項
1 當專案逐漸變大，webpack 的編譯時間會變長，可以通過引數讓編譯的輸出內容帶有進度和顏色。webpack progress colors 2 如果不想每次修改模組後都重新編譯，那麼可以啟動監聽模式。開啟監聽模式後，沒有變化的模組會在編譯後快取到記憶體中，而不會每次都被重新編譯，所以監聽模式的...