前言

初衷： 整理一些常用的loader分享給大家，方便知道在什麼場景下該用什麼loader。如果有大佬都懂悄悄左滑就行，不喜勿噴。
適合人群： 前端初級開發。

style-loader

用途： 用於將css編譯完成的樣式，掛載到頁面style標籤上。需要注意loader執行順序，style-loader放到第一位，因為loader都是從下往上執行，最後全部編譯完成掛載到style上
安裝

cnpm i style-loader -D

配置
webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\.css/,use: ["style-loader"]
   }
  ]
 }
}

css-loader

用途： 用於識別.css檔案,處理css必須配合style-loader共同使用，只安裝css-loader樣式不會生效。
安裝

cnpm i css-loader style-loader -D

配置
webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\.css/,use: [
     "style-loader","css-loader"
    ]
   }
  ]
 }
}

sass-loader

用途：css前處理器，我們在專案開發中經常會使用到的，編寫css非常便捷，一個字 "棒"。

cnpm i [email protected] node-sass -D

配置
index.js

import "index.scss"

index.scss
body {
 font-size: 18px;
 background: red;
}

webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\.scss$/,"css-loader","sass-loader"
    ],include: /src/,},]
 }
}

postcss-loader

用途： 用於補充css樣式各種瀏覽器核心字首，太方便了，不用我們手動寫啦。

cnpm i postcss-loader autoprefixer -D

配置
postcss.config.js

如果不寫在該檔案呢，也可以寫在postcss-loader的options裡面，寫在該檔案跟寫在那裡是同等的

module.exports = {
 plugins: [
  require("autoprefixer")({
   overrideBrowserslist: ["> 1%","last 3 versions","ie 8"]
  })
 ]
}

UIEwgJG

屬性	描述
> 1%	全球超過1%人使用的瀏覽器
> 5% in CN	指定國家使用率覆蓋
last 2 versions	所有瀏覽器相容到最後兩個版本根據CanIUse.com追蹤的版本
Firefox ESR	火狐最新版本
Firefox > 20	指定瀏覽器的版本範圍
not ie <=8	方向排除UIEwgJG部分版本
Firefox 12.1	指定瀏覽器的相容到指定版本

webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\.scss$/,"sass-loader","postcss-loader"
    ],]
 }
}

babelwww.cppcns.com-loader

用途： 將Es6+ 語法轉換為Es5語法。
安裝

cnpm i babel-loader @babel/core @babel/preset-env -D

• babel-loader 這是使babel和webpack協同工作的模組
• @bable/core 這是babel編譯器核心模組
• @babel/preset-env 這是babel官方推薦的預置器，可根據使用者的環境自動新增所需的外掛和補丁來編譯Es6程式碼

配置
webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\.js$/,use: {
     loader: "babel-loader",options: {
      presets: [
       ['@babel/preset-env',{ targets: "defaults"}]
      ]
     }
    }
   },]
 }
}

ts-loader

用途： 用於配置專案typescript
安裝

cnpm i ts-loader typescript -D

配置
webpack.config.js
當前配置ts-loader不會生效，只是會編譯識別.ts檔案,主要配置檔案在tsconfig.json裡

module.exports = {
 module: {
  rules: [
   {
    test: /\.ts$/,use: "ts-loader"
   },]
 }
}

tsconfig.json

{
 "compilerOptions": {
  "declaration": true,"declarationMap": true,// 開啟map檔案除錯使用
  "sourceMap": true,"target": "es5",// 轉換為Es5語法
 }
} 

webpack.config.js

module.exports = {
 entry: "./src/index.ts",output: {
  path: __dirname + "/dist",filename: "index.js",module: {
  rules: [
   {
    {
     test: /\.ts$/,use: "ts-loader",}
   }
  ]
 }
}

html-loader

用途： 我們有時候想引入一個html頁面程式碼片段賦值給DOM元素內容使用，這時就用到html-loader
安裝

cnpm i [email protected] -D

建議安裝低版本，高版本可能會不相容導致報錯。我這裡安裝的是0.5.5版本
配置
index.js

import Content from "../template.html"

document.body.innerHTML = Content

webpack.config.js
module.exports = {
 module: {
  rules: [
   {
    test: /\.html$/,use: "html-loader"
   }
  ]
 }
}

file-loader

用途： 用於處理檔案型別資源，如jpg，png等圖片。返回值為publicPath為準。
安裝

cnpm i file-loader -D

配置
index.js

import img from "./pic.png"
console.log(img) // https://www.baidu.com/pic_600eca23.png

webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\.(png|jpg|jpeg)$/,use: [
     {
      loader: "file-loader",options: {
       name: "[name]_[hash:8].[ext]",publicPath: "https://www.baidu.com" 
      }
     }
    ]
   }
  ]
 }
}

url-loader

用途： url-loader也是處理圖片型別資源，只不過它與file-loader有一點不同，url-loader可以設定一個根據圖片大小進行不同的操作，如果該圖片大小大於指定的大小，則將圖片進行打包資源，否則將圖片轉換為base64字串合併到js檔案裡
安裝

cnpm i url-loader -D

配置
index.js

import img from "./pic.png"

webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\.(png|jpg|jpeg)$/,use: [
     {
      loader: "url-loader",limit: 10240,// 這裡單位為(b) 10240 => 10kb
       // 這裡如果小於10kb則轉換為base64打包進js檔案，如果大於10kb則打包到dist目錄
      }
     }
    ]
   }
  ]
 }
}

html-withimg-loader

用途： 我們在編譯圖片時，都是使用file-loader和url-loader，這兩個loader都是查詢js檔案裡的相關圖片資源，但是html裡面的檔案不會查詢所以我們html裡的圖片也想打包進去，這時使用html-withimg-loader
安裝

cnpm i html-withimg-loader -D

配置
index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>首頁</title>
</head>
<body>
 <h4>我蛙人</h4>
 <img src="./src/img/pic.jpg" alt="分享12個Webpack中常用的Loader(小結)">
</body>
</html>

webpack.config.js
如果打包出現img的src路徑為[Object Module]，解決方案有

• 將file-loader降級到4.2.0
• 修改options引數esModule為false

module.exports = {
 module: {
  rules: [
   {
    test: /\.(png|jpg|jpeg)$/,use: {
     loader: "file-loader",options: {
      name: "[name]_[hash:8].[ext]",publicPath: "http://www.baidu.com",esModule: false
     }
    }
   },{
    test: /\.(png|jpeg|jpg)/,use: "html-withimg-loader"
   }
  ]
 }
}

vue-loader

用途： 用於編譯.vue檔案，如我們自己搭建vue專案就可以使用vue-loader,以下簡單瞭解一下，這裡就不多贅述啦。
安裝

cnpm i [email protected] vue vue-template-compiler -D

• vue-loader 用於識別.vue檔案
• vue 不用多說，識別支援vue語法
• vue-template-compiler 語法模板渲染引擎 {{}} template、 script、 style

配置
main.js

import App from "./index.vue"
import Vue from 'Vwww.cppcns.comue'
new Vue({
 el: "#app",render: h => h(App) 
})

index.vue

<template>
 <div class="index">
 {{ msg }}
 </div>
</template>

<script>
export default {
 name: 'index',data() {
 return {
  msg: "hello 蛙人"
 }
 },created() {},components: {},watch: {},methods: {}
}
</script>
<style scoped>

</style>

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
 entry: "./src/main.js",module: {
  rules: [
   {
    test: /\.vue$/,use: "vue-loader"
   }
  ]
 },plugins: [
  new VueLoaderPlugin()
 ]
}

eslint-loader

用途： 用於檢查程式碼是否符合規範，是否存在語法錯誤。
安裝

cnpm i eslint-loader eslint -D

配置
index.ts

var abc:any = 123;
console.log(abc)

.eslintrc.js
這裡簡單寫幾個規則

module.exports = {
 root: true,env: {
  browser: true,rules: {
  "no-alert": 0,// 禁止使用alert
  "indent": [2,4],// 縮排風格
  "no-unused-vars": "error" // 變數宣告必須使用
 }
}

webpack.config.js

module.exports = {
 module: {
  rules: [
   {
    test: /\.ts$/,use: ["eslint-loader","ts-loader"],enforce: "pre",exclude: /node_modules/
   },{
    test: /\.ts$/,usewww.cppcns.com: "ts-loader",exclude: /node_modules/
   }
  ]
 }
}

總結

到此這篇關於分享12個Webpack中常用的Loader(小結)的文章就介紹到這了,更多相關Webpack常用的Loader內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！