首页 文章详情

分享12个Webpack中常用的Loader

IQ前端 | 50 2021-11-28 18:49 0 0 0
UniSMS (合一短信)


点击上方“IQ前端”,选择“设为星标
第一时间推送新姿势!


前言

初衷: 整理一些常用的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 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-loaderoptions里面,写在该文件跟写在那里是同等的

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

用途: 用于处理文件类型资源,如jpgpng等图片。返回值为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]",
                            limit10240// 这里单位为(b) 10240 => 10kb
                            // 这里如果小于10kb则转换为base64打包进js文件,如果大于10kb则打包到dist目录
                        }
                    }
                ]
            }
        ]
    }
}

html-withimg-loader

用途: 我们在编译图片时,都是使用file-loaderurl-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",
                        esModulefalse
                    }
                }
            },
            {
                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  语法模板渲染引擎 {{}} templatescriptstyle

配置

main.js

import App from "./index.vue"
import Vue from 'Vue'
new Vue({
    el"#app",
    renderh => 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 = {
    roottrue,   
    env: {
        browsertrue,
    },
    rules: {
        "no-alert"0// 禁止使用alert
        "indent": [24], // 缩进风格
        "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/
            }
        ]
    }
}

感谢

谢你读完本篇文章,希望对你能有所帮助,如有问题欢迎各位指正。

结语

「关注公众号IQ前端,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔」

  • 关注后回复资料免费领取学习资料
  • 关注后回复进群拉你进技术交流群
  • 欢迎关注IQ前端,更多「CSS/JS开发技巧」只在公众号推送





good-icon 0
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter