【webpack】分享12個(gè)Webpack中常用的Loader

前言

初衷： 整理一些常用的loader分享給大家，方便知道在什么場(chǎng)景下該用什么loader。如果有大佬都懂悄悄左滑就行，不喜勿噴。

適合人群： 前端初級(jí)開(kāi)發(fā)。

style-loader

用途： 用于將css編譯完成的樣式，掛載到頁(yè)面style標(biāo)簽上。需要注意loader執(zhí)行順序，style-loader放到第一位，因?yàn)閘oader都是從下往上執(zhí)行，最后全部編譯完成掛載到style上

安裝

cnpm i style-loader -D

配置

webpack.config.js

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

css-loader

用途： 用于識(shí)別.css文件, 處理css必須配合style-loader共同使用，只安裝css-loader樣式不會(huì)生效。

安裝

cnpm i css-loader style-loader -D

配置

webpack.config.js

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

sass-loader

用途：css預(yù)處理器，我們?cè)陧?xiàng)目開(kāi)發(fā)中經(jīng)常會(huì)使用到的，編寫(xiě)css非常便捷，一個(gè)字 "棒"。

安裝

cnpm i sass-loader@5.0.0 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$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
                include: /src/, 
            },
        ]
    }
}

postcss-loader

用途： 用于補(bǔ)充css樣式各種瀏覽器內(nèi)核前綴，太方便了，不用我們手動(dòng)寫(xiě)啦。

安裝

cnpm i postcss-loader autoprefixer -D

配置

postcss.config.js

如果不寫(xiě)在該文件呢，也可以寫(xiě)在postcss-loader的options里面，寫(xiě)在該文件跟寫(xiě)在那里是同等的

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

webpack.config.js

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

babel-loader

用途：將Es6+ 語(yǔ)法轉(zhuǎn)換為Es5語(yǔ)法。

安裝

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

• babel-loader 這是使babel和webpack協(xié)同工作的模塊
• @bable/core 這是babel編譯器核心模塊
• @babel/preset-env 這是babel官方推薦的預(yù)置器，可根據(jù)用戶(hù)的環(huán)境自動(dòng)添加所需的插件和補(bǔ)丁來(lái)編譯Es6代碼

配置

webpack.config.js

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

ts-loader

用途： 用于配置項(xiàng)目typescript

安裝

cnpm i ts-loader typescript -D

配置

webpack.config.js

當(dāng)前配置ts-loader不會(huì)生效，只是會(huì)編譯識(shí)別.ts文件, 主要配置文件在tsconfig.json里

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

tsconfig.json

{
    "compilerOptions": {
      "declaration": true,
      "declarationMap": true, // 開(kāi)啟map文件調(diào)試使用
      "sourceMap": true,
      "target": "es5", // 轉(zhuǎn)換為Es5語(yǔ)法
    }
}  

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

用途： 我們有時(shí)候想引入一個(gè)html頁(yè)面代碼片段賦值給DOM元素內(nèi)容使用，這時(shí)就用到html-loader

安裝

cnpm i html-loader@0.5.5 -D

建議安裝低版本，高版本可能會(huì)不兼容導(dǎo)致報(bào)錯(cuò)。我這里安裝的是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

用途： 用于處理文件類(lèi)型資源，如jpg，png等圖片。返回值為publicPath為準(zhǔn)。

安裝

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也是處理圖片類(lèi)型資源，只不過(guò)它與file-loader有一點(diǎn)不同，url-loader可以設(shè)置一個(gè)根據(jù)圖片大小進(jìn)行不同的操作，如果該圖片大小大于指定的大小，則將圖片進(jìn)行打包資源，否則將圖片轉(zhuǎn)換為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",
                        options: {
                            name: "[name]_[hash:8].[ext]",
                            limit: 10240, // 這里單位為(b) 10240 => 10kb
                            // 這里如果小于10kb則轉(zhuǎn)換為base64打包進(jìn)js文件，如果大于10kb則打包到dist目錄
                        }
                    }
                ]
            }
        ]
    }
}

html-withimg-loader

用途： 我們?cè)诰幾g圖片時(shí)，都是使用file-loader和url-loader，這兩個(gè)loader都是查找js文件里的相關(guān)圖片資源，但是html里面的文件不會(huì)查找所以我們html里的圖片也想打包進(jìn)去，這時(shí)使用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>首頁(yè)</title>
</head>
<body>
    <h4>我蛙人</h4>
    <img src="./src/img/pic.jpg" alt="">
</body>
</html>

webpack.config.js

如果打包出現(xiàn)img的src路徑為[Object Module]，解決方案有

• 將file-loader降級(jí)到4.2.0
• 修改options參數(shù)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項(xiàng)目就可以使用vue-loader, 以下簡(jiǎn)單了解一下，這里就不多贅述啦。

安裝

cnpm i vue-loader@15.7.0 vue vue-template-compiler -D

• vue-loader 用于識(shí)別.vue文件
• vue 不用多說(shuō)，識(shí)別支持vue語(yǔ)法
• vue-template-compiler  語(yǔ)法模板渲染引擎 {{}} template、 script、 style

配置

main.js

import App from "./index.vue"
import Vue from 'Vue'
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",
    output: {
        path: __dirname + "/dist",
        filename: "index.js",
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: "vue-loader"
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

eslint-loader

用途： 用于檢查代碼是否符合規(guī)范，是否存在語(yǔ)法錯(cuò)誤。

安裝

cnpm i eslint-loader eslint -D

配置

index.ts

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

.eslintrc.js

這里簡(jiǎn)單寫(xiě)幾個(gè)規(guī)則

module.exports = {
    root: true,   
    env: {
        browser: true,
    },
    rules: {
        "no-alert": 0, // 禁止使用alert
        "indent": [2, 4], // 縮進(jìn)風(fēng)格
        "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$/,
                use: "ts-loader",
                exclude: /node_modules/
            }
        ]
    }
}

感謝

謝謝你讀完本篇文章，希望對(duì)你能有所幫助，如有問(wèn)題歡迎各位指正。

歡迎關(guān)注「前端雜貨鋪」，一個(gè)有溫度且致力于前端分享的雜貨鋪

關(guān)注回復(fù)「加群」，可加入雜貨鋪一起交流學(xué)習(xí)成長(zhǎng)