欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

webpack-loader的使用詳解

 更新時間：2024年04月16日 10:14:20   作者：m0_74019046  
webpack默認(rèn)只能處理js其他的像css,圖片都需要借助loader來處理,這篇文章主要介紹了webpack-loader的使用詳解,需要的朋友可以參考下

引入css后執(zhí)行打包命令 "build": "npx webpack --config wk.config.js"發(fā)現(xiàn)報錯：

webpack默認(rèn)只能處理js其他的像css,圖片都需要借助loader來處理

css-loader

loader可以用于對模塊的源代碼進(jìn)行轉(zhuǎn)換，可以把css看成一個模塊，模塊可以通過import來加載，但是在加載模塊時，webpack不知道如何對其進(jìn)行加載，需要特定的loader完成這個功能。
npm i css-loader -D

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{loader:"css-loader"}],
      },
    ],
  },
};

module.rules中允許我們配置多個loader.。rules對應(yīng)的值是一個數(shù)組[rule],數(shù)組中存放多個rule,rule是一個對象，有多個屬性：
test:用于對資源進(jìn)行匹配，通常會設(shè)置成正則表達(dá)式
use:對應(yīng)的值是一個數(shù)組[useEntry] useEntry是一個數(shù)組也有一些屬性

  • loader:必須要一個loader屬性，對應(yīng)的值是一個字符串。只有一個loader時可以簡寫 例如use:[“css-loader”]
  • options:可選的屬性,只是一個字符串或?qū)ο?/li>
  • query：目前已經(jīng)被options給替代

loader: use:[loader]的簡寫， 只有一個loader時也可以簡寫 loader:“css-loader”

簡寫：

//原來寫法
 module: {
    rules: [
      {
        test: /\.css$/,
        use: [{loader:"css-loader"}],
      },
    ],
// 簡寫1
 module: {
    rules: [
      {
        test: /\.css$/,
        loader:"css-loader"
      },
    ],
  },
// 簡寫2
   module: {
    rules: [
      {
        test: /\.css$/,
        use:["csss-loader"]
      },
    ],
  },

style-loader

css-loader只能解決不報錯的問題,但是css樣式并沒有生效。這是因為css-loader只負(fù)責(zé)解析css，不會將解析后的css插入到頁面中，需要通過style-loader把樣式插入到頁面中。
npm i style-loader -D

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};
// use: ["style-loader", "css-loader"], 也可以寫成   use: [{ loader: "css-loader" }, { loader: "css-loader" }],

loader的執(zhí)行順序是從后往前執(zhí)行的
在index.html中引入打包后的文件，就可以在頁面中看到效果

sass-loader 解析sass

npm i sass-loader -D

編寫sass并引入文件

配置sass-loader

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

postcss-loader

PostCSS是一個用JavaScript插件轉(zhuǎn)換CSS的工具。它可以幫助開發(fā)人員處理CSS，包括自動添加瀏覽器前綴、CSS變量、嵌套規(guī)則、函數(shù)等
npm i postcss-loader -D
以 autoprefixer （會添加一些瀏覽器的前綴）為例

.

由于postcss-loader有很多配置項，所以使用對象的形式：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: ["autoprefixer"],
                //也有這種寫法plugins: [require("autoprefixer")],現(xiàn)在可以省略require()
              },
            },
          },
        ],
      },
    ],
  },
};

結(jié)果：

由于postcss配置項太多，postcss通常單獨(dú)抽離出一個文件postcss.config.js:

在webpack中就可以簡寫了：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

“autoprefixer"只能自動添加瀏覽器前綴，postcss還有其他功能，因此實際開發(fā)中并不會安裝"autoprefixer”,而是使用 postcss-preset-env它可以將一些現(xiàn)代的css特性轉(zhuǎn)換為瀏覽器所識別的特性。npm i postcss-preset-env -D

處理資源模塊

在webpack5之前 加載這些資源需要使用一些loader，例如raw-loader,url-loader等。
在webpack5之后，可以直接使用資源模塊類型(asset module type)來代替上面這些loader。

資源模塊的類型分為 asset/resource ,asset/inline,asset/source,asset。

asset/resource:發(fā)送一個單獨(dú)的文件并導(dǎo)出url(之前通過file-loader來),如果有兩個圖片，在打包后會生成兩個文件，這就意味著還要發(fā)送額外的請求。

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/resource",
      },
    ],
  },
};

這里要注意圖片也要當(dāng)作一個模塊來導(dǎo)入

執(zhí)行命令后可以看到打包后的結(jié)果：

asset/inline：將圖片進(jìn)行base64編碼，并把編碼后的源碼打包到j(luò)s文件中。會造成js文件非常大，下載和解析js文件需要的時間長。

onst path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/inline",
      },
    ],
  },
};

打包后的js文件

這里還加了一個背景圖.bgi { background-image: url(../asset/1.png); } img和background-image的url都是base64格式的

asset/source：是將圖片的源碼打包到j(luò)s文件中和asset/inline一樣會造成js文件過大。

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,。
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/source",
      },
    ],
  },
};

asset:可以根據(jù)需要生成一個單獨(dú)的文件，或打包到j(luò)s中。

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
      },
    ],
  },
};

一般type會設(shè)置為asset，將較小的文件進(jìn)行base64編碼，較大的文件單獨(dú)打包。

根據(jù)文件大小打包

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
      },
    ],
  },
};
//webpack官網(wǎng):https://www.webpackjs.com/configuration/module/#ruleparserdataurlcondition
// 如果一個模塊源碼大小小于 maxSize，那么模塊會被作為一個 Base64 編碼的字符串注入到包中， 否則模塊文件會被生成到輸出的目標(biāo)目錄中。
//dataUrlCondition 還可以寫成函數(shù)的形式

對打包后的文件名，文件目錄進(jìn)行操作

可以在output中對打包后生成的文件進(jìn)行操作，比如修改文件名。但是在這里修改會影響所有的文件，不推薦在這里修改。

// 這里也是可以支持[hash][ext][query]的
const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
    assetModuleFilename: "aa.png",
  },
  module: {
    rules: [ ],
  },
};

應(yīng)該針對對應(yīng)的文件修改：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
        generator: {
          filename: "img/[hash][ext]",
        },
      },
    ],
  },
};
// webpack官網(wǎng)：https://www.webpackjs.com/configuration/module/#rulegeneratorfilename
//這里其實還可以控制生成的hash值的長度 img/[hash:8][ext]

到目前為止所有的代碼

//webpack
const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
        generator: {
          filename: "img/[hash][ext]",
        },
      },
    ],
  },
};
//postcss.config.js
module.exports = {
  plugins: ["postcss-preset-env"],
};

到此這篇關(guān)于webpack-loader的使用的文章就介紹到這了,更多相關(guān)webpack-loader的使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論