webpack loader使用

節(jié)我們來學(xué)習(xí) webpack 中 loader 加載器的使用，那么什么是 loader 呢。從本質(zhì)上來說，loader 就是一個(gè) Node.js 模塊，在 webpack 的定義中，loader 導(dǎo)出一個(gè)函數(shù)，loader 會(huì)在轉(zhuǎn)換源模塊的時(shí)候調(diào)用該函數(shù)。

webpack 本身依然是只能處理 JS 文件的，但是通過一系列的 loader ，就可以處理其他文件啦。例如 Less 和 Sass，以前我們編譯這些 CSS 預(yù)處理器，需要使用 gulp 進(jìn)行編譯，而顯示可以通過 webpack 中的 loader 加載器來實(shí)現(xiàn)。

常見loader

webpack 中有一系列的 loader，在實(shí)際項(xiàng)目中，我們會(huì)根據(jù)不同的需求使用到不同的 loader。例如 webpack 中的一些常見 loader 如下所示：

css-loader ：用于處理 css 文件，使得能在 js 文件中引入使用。
style-loader ：用于將 css 文件注入到 index.html 中的 <style> 標(biāo)簽上。
less-loader：處理 less 代碼。
sass-loader：處理 sass 代碼。
postcss-loader：用 postcss 來處理 CSS代碼。
babel-loader：用 babel 來轉(zhuǎn)換 ES6 文件到 ES5。
file-loader：打包圖片，打包字體圖標(biāo)。
url-loader：和 file-loader 類似，但是當(dāng)文件小于設(shè)定的 limit 時(shí)，可以返回一個(gè) DataUrl（提升網(wǎng)頁性能）。
html-withimg-loader：打包 HTML 文件中的圖片。
eslint-loader：用于檢查常見的 JavaScript 代碼錯(cuò)誤，也可以進(jìn)行"代碼規(guī)范"檢查。

loader的安裝和配置

我們可以在 webpack.config.js 配置文件中配置 loader，可以在 module.rules 中指定一個(gè)或多個(gè) loader。

通過配置loader 的兩個(gè)屬性來實(shí)現(xiàn)：

test 屬性：用來標(biāo)識(shí)出應(yīng)該被對(duì)應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的某個(gè)或多個(gè)文件。
use 屬性：表示轉(zhuǎn)換時(shí)要用哪個(gè) loader。

示例：

例如默認(rèn)情況下 webpack 只能打包 JS 文件，不能識(shí)別其他例如 CSS、Less、image等類型的文件，那么如果我們想要打包 CSS 樣式文件，可以在 webpack 中使用 loader 加載器，可以將一種文件轉(zhuǎn)換為另一種文件，將webpack不能識(shí)別的其它類型文件轉(zhuǎn)換為 webpack 可識(shí)別 JS 類型文件。

首先需要安裝 style-loader 和 css-loader ，安裝命令如下所示：

npm install css-loader style-loader --save-dev

命令執(zhí)行成功后，這兩個(gè) loader 會(huì)自動(dòng)添加到 package.json 的依賴中，如下所示：

"devDependencies": {
    "css-loader": "^3.6.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.11.0"
  }

然后在 webpack.config.js 中配置 loader，在 module 屬性的 rule 屬性中配置 loader 規(guī)則：

module:{
    rules:[{
        test:/.css$/,
        use:['style-loader','css-loader']
    }]
}

這里表示匹配所有 .css 后綴結(jié)尾的文件，通過 style-loader 和 css-loader 加載器進(jìn)行轉(zhuǎn)換后再編譯。

然后我們創(chuàng)建一個(gè) xkd.css 文件，內(nèi)容如下所示：

p{
    font-size: 12px;
    color: red;
}

并將 xkd.css 文件導(dǎo)入到 index.js 入口文件中：

document.write('你好，俠課島！');

// 導(dǎo)入 CSS 文件
import "./xkd.css";

然后我們執(zhí)行打包命令后會(huì)重新生成打包文件，會(huì)發(fā)現(xiàn) xkd.css 文件也成功打包到 bundle.js 文件中。

這就是 loader 的基本使用流程，先安裝loader，然后在配置文件中配置 loader ，最后再進(jìn)行打包就可以啦。

loader 特性

loader 支持鏈?zhǔn)秸{(diào)用，鏈中的每個(gè) loader 會(huì)將轉(zhuǎn)換應(yīng)用在已處理過的資源上。一組鏈?zhǔn)降?loader 將按照相反的順序執(zhí)行。鏈中的第一個(gè) loader 將其結(jié)果傳遞給下一個(gè) loader，依此類推。
loader 可以是同步的，也可以是異步的。
loader 運(yùn)行在 Node.js 中，并且能夠執(zhí)行任何操作。
loader 也可以內(nèi)聯(lián)顯示指定。
loader 可以通過 options 對(duì)象配置。
除了常見的通過 package.json 的 main 來將一個(gè) npm 模塊導(dǎo)出為 loader，還可以在 module.rules 中使用 loader 字段直接引用一個(gè)模塊。
插件(plugin)可以為 loader 帶來更多特性。
loader 能夠產(chǎn)生額外的任意文件。

的：因?yàn)閭鹘y(tǒng)的link加載css樣式會(huì)發(fā)起二次請(qǐng)求，所以我們需要在webpack中使用loader加載css樣式

準(zhǔn)備：你需要準(zhǔn)備一個(gè)已經(jīng)配置好的webpack項(xiàng)目

配置cssloader

第一步：安裝相對(duì)應(yīng)的插件（cnpm i style-loader css-loader -D）

如果出現(xiàn)警告說：需要依賴webpack就再安裝一下

第二步：配置webpack.config.js

配置less loader

第一步：安裝插件（cnpm i less-loader less -D）

第二步：配置

配置sass loader

第一步：安裝插件（cnpm i sass-loader node-sass -D）

第二步：配置

測(cè)試

mian.js

index.css & index.scss

index.html

啟動(dòng)項(xiàng)目

結(jié)果：

者：秋天不落葉

轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/KmDLcJ0jhB667ZouDB8tyg

在線咨詢

上一篇：快速學(xué)會(huì)html表單提交（php）
下一篇：JavaScript將內(nèi)容復(fù)制到剪貼板

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

webpack loader使用

常見loader

loader的安裝和配置

示例：

loader 特性

配置cssloader

第一步：安裝相對(duì)應(yīng)的插件 （cnpm i style-loader css-loader -D）

第二步：配置webpack.config.js

配置less loader

第一步：安裝插件（cnpm i less-loader less -D）

第二步：配置

配置sass loader

第一步：安裝插件 （cnpm i sass-loader node-sass -D）

第二步：配置

測(cè)試

您的項(xiàng)目需求

第一步：安裝相對(duì)應(yīng)的插件（cnpm i style-loader css-loader -D）

第一步：安裝插件（cnpm i sass-loader node-sass -D）