分享12個Webpack中經常使用的Loader

前言

初衷： 整理一些經常使用的loader分享給你們，方便知道在什麼場景下該用什麼loader。若是有大佬都懂悄悄左滑就行，不喜勿噴。javascript

適合人羣： 前端初級開發。css

style-loader

用途： 用於將css編譯完成的樣式，掛載到頁面style標籤上。須要注意loader執行順序，style-loader放到第一位，由於loader都是從下往上執行，最後所有編譯完成掛載到style上html

安裝前端

cnpm i style-loader -D
複製代碼

配置vue

webpack.config.jsjava

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

css-loader

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

安裝webpack

cnpm i css-loader style-loader -D
複製代碼

配置git

webpack.config.jsgithub

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

sass-loader

用途：css預處理器，咱們在項目開發中常常會使用到的，編寫css很是便捷，一個字 "棒"。

安裝

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

用途： 用於補充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"]
        })
    ]
}
複製代碼

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

webpack.config.js

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

babel-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 html-loader@0.5.5 -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",
                        options: {
                            name: "[name]_[hash:8].[ext]",
                            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="">
</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 vue-loader@15.7.0 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 '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

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

安裝

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$/,
                use: "ts-loader",
                exclude: /node_modules/
            }
        ]
    }
}
複製代碼

感謝

謝謝你讀完本篇文章，但願對你能有所幫助，若有問題歡迎各位指正。

我是蛙人(✿◡‿◡)，若是以爲寫得能夠的話，請點個贊吧❤。

感興趣的小夥伴能夠加入 [ 前端娛樂圈交流羣 ] 歡迎你們一塊兒來交流討論

寫做不易，「點贊」+「在看」+「轉發」 謝謝支持❤

往期好文

《聊聊在Vue項目中使用Decorator裝飾器》

《聊聊什麼是CommonJs和Es Module及它們的區別》

《帶你輕鬆理解數據結構之Map》

《這些工做中用到的JavaScript小技巧你都知道嗎？》

《【建議收藏】分享一些工做中經常使用的Git命令及特殊問題場景怎麼解決》

《你真的瞭解ES6中的函數特性麼？》