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

image.png

image.png

2、postcss-loader使用摄杂。
postcss-loader只能編譯css以及js坝咐。
postcss主要功能只有兩個(gè)：第?就是把css解析成JS可以操作的抽象語法樹AST，第?就是調(diào)?插件來處理AST并得到結(jié)果.
autoprefixer:?動(dòng)補(bǔ)?瀏覽器前綴.
//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 實(shí)際上就是聲明了?段瀏覽器的集合析恢，我們的?具可以根據(jù)這段集合描述墨坚，針對(duì)性的輸出兼容性代碼。

WeChat6610ea3f7d1853e7e3e0a21ac00bc241.png

image.png

4鞍时、mini-css-extract-plugin:抽離css文件并對(duì)css代碼進(jìn)行壓縮亏拉。

WeChatf9697afee1e28dfc75946a01330c6e9f.png

WeChatb6dff05764189286c3093a532fcc42f3.png

WeChatd8711008df2f7a5eec115d21527dbb23.png

image.png

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

image.png

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

(3)在index.js中引入準(zhǔn)備好的圖片笙僚。

image.png

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

image.png

優(yōu)化點(diǎn)：
我們查看一下dist目錄下的文件名字味咳，是一個(gè)hash的文件名庇勃，太長(zhǎng)了，我們需要優(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進(jìn)行決定

用file-loader使用字體。
1全陨、在阿里iconfont的網(wǎng)站上下載好爆班，需要用的字體，把.woff放到目錄下對(duì)應(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/", // 輸出到對(duì)應(yīng)的路徑
          },
        },
      },
}

6枢舶、url-loader：

image.png

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

image.png

limit的使用含義查看注釋后众。

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

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

clean-webpack-plugin:如何做到dist?錄下某個(gè)?件或?錄不被清空： 使?配置
項(xiàng):cleanOnceBeforeBuildPatterns 案例：cleanOnceBeforeBuildPatterns: ["/", "!dll", "!dll/"], ！感嘆號(hào)相當(dāng)于exclude 排除距帅，意思是清空操作排除dll?錄右锨，和dll?錄下所有?件。 注意：數(shù)組列表?的“/”是默認(rèn)值锥债，不可忽略陡蝇，否則不做清空操作痊臭。

如何編寫一個(gè)loader

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

image.png

image.png

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

image.png

WeChat40e031eed0fc8d7f6682948290e6cdd0.png

image.png

image.png

注意幾個(gè)點(diǎn)：
1、既然需要使用多個(gè)插件看疗，use就需要使用數(shù)組沙峻。
2、user里的執(zhí)行順序是從下到上两芳，從右到左摔寨。
即：replaceLoaderAsync文件執(zhí)行完成以后返回的String和Buffer會(huì)傳遞給下一個(gè)插件replaceLoader。
3怖辆、this.query的概念是复。

image.png

在寫的案例中，this.query指向的options里的數(shù)據(jù)疗隶。
this.callback()

image.png

image.png

image.png

image.png

說明自定義的laoder編寫成功斑鼻。

編寫lsee處理loader

1蒋纬、再webpack.config.js文件下，把less模塊換成自己的編寫的loader坚弱。

image.png

2蜀备、在myLoaders文件夾下創(chuàng)建lessLoader.js文件。
這個(gè)文件需要引入less模塊荒叶，然后將less轉(zhuǎn)換成css碾阁。

image.png

image.png

4、在myLoaders文件夾下創(chuàng)建styleLoader.js文件愁茁。
這個(gè)模塊任務(wù)蚕钦，樣式插入到文件dom中。

image.png

image.png

最后進(jìn)行打包，打開index.html,看到如下的樣式促煮，即文件處理成功邮屁。

image.png