当前位置：码云笔记 > 前端 > Webpack中常用的Loader有哪些
码云码云 前端

Webpack中常用的Loader有哪些

AI 概述
style-loader用途安装配置css-loader用途安装配置sass-loader用途安装配置postcss-loader用途安装配置babel-loader用途安装配置ts-loader用途安装配置html-loader用途安装配置file-loader用途安装配置url-loader用途安装配置html-withimg-loader用途安装配置vue-loader用途安装配置eslint-loader用途安...
目录
文章目录隐藏
  1. style-loader
  2. css-loader
  3. sass-loader
  4. postcss-loader
  5. babel-loader
  6. ts-loader
  7. html-loader
  8. file-loader
  9. url-loader
  10. html-withimg-loader
  11. vue-loader
  12. eslint-loader
  13. 结语

Webpack 中常用的 Loader 有哪些

本文由码云笔记为大家整理分享 Webpack 中常用的 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-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 中：

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

当前配置 ts-loader 不会生效，只是会编译识别.ts文件, 主要配置文件在 tsconfig.json 里。

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)

webpack.config.js 中：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name]_[hash:8].[ext]",
                            publicPath: "https://mybj123.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>
    ![](./src/img/pic.jpg)
</body>
</html>

webpack.config.js 中：

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

如果打包出现 img 的 src 路径为[Object Module]，解决方案有

  • 将file-loader降级到 4.2.0
  • 修改options参数esModule为 false

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/
            }
        ]
    }
}

结语

以上就是码云笔记今天分享的 Webpack 中常用的 Loader 有哪些，希望对大家有用，感谢阅读。

相关文章推荐：

以上关于Webpack中常用的Loader有哪些的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » Webpack中常用的Loader有哪些

码云 SVIP

分享到：

相关推荐

发表回复