常見loader的使用
1、less-loader使用。

在webpack.confi.js的module的模塊中進行如下編寫。

image.png

sass-loader用法與less-loader一致。
這里需要注意的是，有些時候安裝了less和less-loader。但是打包的時候會報錯，需要考慮是否兩個版本太高的原因?qū)е?，需要降版本降級?br>

image.png

2、postcss-loader使用。
postcss-loader只能編譯css以及js。
postcss主要功能只有兩個：第?就是把css解析成JS可以操作的抽象語法樹AST，第?就是調(diào)?插件來處理AST并得到結(jié)果.
autoprefixer:?動補?瀏覽器前綴.
//webpack.config.js

{
    test: /\.css$/,
    use: ["style-loader", "css-loader", "postcss-loader"]
},
//postcss.config.js
module.exports = {
     plugins: [
         require("autoprefixer")({
                 overrideBrowserslist: ["last 2 versions", ">1%"]
         })
     ]
};

browserslist 實際上就是聲明了?段瀏覽器的集合，我們的?具可以根據(jù)這段集合描述，針對性的輸出兼容性代碼。

Browserslist 的配置可以放在 package.json 中，也可以單獨放在配置?件 .browserslistrc 中。所有的?具都會主動查找 browserslist 的配置?件，根據(jù) browserslist 配置找出對應(yīng)的?標瀏覽器集合。

WeChat6610ea3f7d1853e7e3e0a21ac00bc241.png

3、cssnano：使寫在瀏覽器里的樣式進行壓縮。（首屏提速的一個優(yōu)化點）

image.png

4、mini-css-extract-plugin:抽離css文件并對css代碼進行壓縮。

(1)引入

WeChatf9697afee1e28dfc75946a01330c6e9f.png

(2)在插件中編寫。

WeChatb6dff05764189286c3093a532fcc42f3.png

(3)使用

WeChatd8711008df2f7a5eec115d21527dbb23.png

(4)在打包后的index.html中進行引入

image.png

loader 處理webpack不?持的格式?件，模塊
?個loader只處理?件事情
loader有執(zhí)?順序：從右到左，從下到上

5、file-loader:處理靜態(tài)資源

image.png

（1）安裝file-loader。
npm install file-loader --save-dev
（2）webpack.congfig.js
webpack.congfig.js的寫法：

        test: /\.jpeg$/,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },

(3)在index.js中引入準備好的圖片。

image.png

（4）使用圖片：一種是在js中使用，一種是在css中使用。
在js中的使用：

image.png

優(yōu)化點：
我們查看一下dist目錄下的文件名字，是一個hash的文件名，太長了，我們需要優(yōu)化。

use: {
loader: "file-loader",
// options額外的配置，?如資源名稱
options: {
// placeholder 占位符 [name]?資源模塊的名稱
// [ext]?資源模塊的后綴
// https://webpack.js.org/loaders/file-loader#placeholders
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "images/"
 }
 }

outputPath:// 圖片輸出位置，也就是圖片存放的位置
publicPath: // 圖片的引用位置，css中如何引用圖片，由publicPath進行決定

用file-loader使用字體。
1、在阿里iconfont的網(wǎng)站上下載好，需要用的字體，把.woff放到目錄下對應(yīng)的路徑下。
2、再css文件中使用和引入。

@font-face {
  font-family: "webfont";
  font-display: swap;
  src: url("webfont.woff") format("woff"); /* chrome、firefox */
}

div {
    font-family: "webfont" !important;
}

webpack.config.js中如下寫法：

{
        test: /\.(eot|woff)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name].[ext]",
            outputPath: "assets/css/", // 輸出到對應(yīng)的路徑
          },
        },
      },
}

6、url-loader：

image.png

url-loader把圖片轉(zhuǎn)化成base64,就是file-loader的加強版，內(nèi)部依賴file-loader。好處是可以減少一次圖片的請求，但是在圖片體積小于3kb時建議使用，大于3kb不建議使用。

image.png

limit的使用含義查看注釋。

7、clean-webpack-plugin: 只會保留dist目錄下生成的文件，之前額外生成的文件都會去掉。
npm install --save-dev clean-webpack-plugin

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
...
plugins: [
 new CleanWebpackPlugin()
]

clean-webpack-plugin:如何做到dist?錄下某個?件或?錄不被清空：使?配置
項:cleanOnceBeforeBuildPatterns 案例：cleanOnceBeforeBuildPatterns: ["/", "!dll", "!dll/"], ！感嘆號相當于exclude 排除，意思是清空操作排除dll?錄，和dll?錄下所有?件。注意：數(shù)組列表?的“/”是默認值，不可忽略，否則不做清空操作。

如何編寫一個loader

在webpack.config.js的文件下的配置。

1、加上入下的配置，可以在配置項中直接寫文件名，而不需要在配置項中使用相對路徑導(dǎo)入。

image.png

2、module里的寫法：

image.png

在根目錄下創(chuàng)建一個myloades文件夾并創(chuàng)建一個replaceLoader.js文件。
1、loader 只能是普通的函數(shù) 不可以是箭頭函數(shù)。
2、函數(shù)里的this指向loader.runner。

image.png

打印source會發(fā)發(fā)現(xiàn)source是文件來源，如下圖：

WeChat40e031eed0fc8d7f6682948290e6cdd0.png

如何使用兩個文件。
再創(chuàng)建一個replaceLoaderAsync.js文件。

image.png

注意幾個點：
1、既然需要使用多個插件，use就需要使用數(shù)組。
2、user里的執(zhí)行順序是從下到上，從右到左。
即：replaceLoaderAsync文件執(zhí)行完成以后返回的String和Buffer會傳遞給下一個插件replaceLoader。
3、this.query的概念。