首页 > 资讯 > 前端开发 > JavaScript >分享12个Webpack中常用的Loader(小结)

916

分享到

分享12个Webpack中常用的Loader(小结)

2024-04-02 19:04:59 916人浏览泡泡鱼

摘要

目录前言style-loaderCSS-loadersass-loaderpostcss-loaderbabel-loaderts-loaderhtml-loaderfile-loa

前言

初衷：整理一些常用的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
当前配置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/
   }
  ]
 }
}

总结

到此这篇关于分享12个Webpack中常用的Loader(小结)的文章就介绍到这了,更多相关Webpack常用的Loader内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 分享12个Webpack中常用的Loader(小结)

本文链接: https://www.lsjlt.com/news/122209.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

分享12个Webpack中常用的Loader(小结)

目录前言style-loadercss-loadersass-loaderpostcss-loaderbabel-loaderts-loaderhtml-loaderfile-loa...

99+

2022-11-11
Java中Object类常用的12个方法(小结)

目录前言1. getClass 方法 2. hashCode 方法 3. equals 方法 4. clone 方法 5. toString 方法 6. notify 方法 7. n...

99+

2022-11-12
常用的29个CSS小技巧分享

本篇内容主要讲解“常用的29个CSS小技巧分享”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“常用的29个CSS小技巧分享”吧!1.清除图片下方出现几像素的空白间...

99+

2022-10-19
分享常用的3个C++小技巧

目录1、头文件是引用<iostream.h>还是<iostream>？2、逗号分割表达式3、在main函数之前运行代码1、头文件是引用<iostream...

99+

2022-11-12
分享12个Vue开发中的性能优化小技巧(实用!)

目录前言1. 长列表性能优化1. 不做响应式2. 虚拟滚动2. v-for 遍历避免同时使用 v-if3. 列表使用唯一 key4. 使用 v-show 复用 DOM5. 无状态的组...

99+

2022-11-13
分享Python中四个不常见的小技巧

目录1. 引言2. 获取 n 个最大数字3. 获取 n 个最小数字4. 删除字符串的特定部分5. 从列表中删除重复元素6. 总结1. 引言在编程界，每个人都希望自己可以写出世界上最...

99+

2022-11-11
总结分享有用的三个前端小妙招！

本篇文章给大家带来了关于前端的相关知识，其中主要跟大家聊聊本人在前端工作中总结的三个小妙招，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。整理下本人在工作中撸代码遇到的一些刚看时一脸懵逼，实则很简单就能解决的小妙招，希望对大家有所帮助哟...

99+

2023-05-14

前端 Vue.js
Python中常用的17个操作分享

这篇文章主要讲解了“Python中常用的17个操作分享”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Python中常用的17个操作分享”吧！1. 交换变量有时候，当我们要交换两个变量的值时，...

99+

2023-06-02
PHP中常用的魔术方法（总结分享）

本篇文章给大家带来了关于PHP的相关知识，PHP把所有”__”开头的方法当做魔术方法，下面主要为大家介绍了PHP中常用的几个魔术方法，文中示例代码讲解详细，需要的可以参考一下。（推荐教程：PHP视频教程）构造方法 / __construct...

99+

2022-09-05
Vue中$once的两个实用小技巧分享

目录前言清除定时器$once/$emit + async/await 实现 Dialog 同步执行总结前言在 Vue 中有很多 API 都有很实用的地方，只是需要挖掘适用的场景，这...

99+

2022-11-13
5个非常实用的小程序UI设计模板分享

在互联网飞速发展的时代，手机逐渐成为工作、学习和生活的必需品。小程序作为一种无需下载和安装即可使用的应用程序，因其快速、方便、强大的功能而受到用户的喜爱。小程序无处不在，随时可用，用完就走。随着需求市场的逐步扩大，许多开发团队也致力于小程序...

99+

2023-09-03

微信小程序小程序
分享python中几个常用函数的正确用法

这篇文章主要讲解了“分享python中几个常用函数的正确用法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“分享python中几个常用函数的正确用法”吧！1 lambda匿名函数，用法如下：#...

99+

2023-06-25
Java中不常用但很好用的开发小技巧分享

目录BigDecimalcompareToListtoArrayJDK8的小玩意flatMap其实干 Java 开发，必然离不开一些计算，比如如果你现在工作是服务...

99+

2023-05-18

Java好用开发技巧分享 Java开发技巧 Java技巧
基于Shell中for循环的几个常用写法分享

第一类：数字性循环 for1-1.sh #!/bin/bash for((i=1;i<=10;i++)); do echo $(expr $i \* 3 + 1); done for1-2.s...

99+

2022-06-04

Shell for循环
分享4个Python中的非常好用的自动化脚本

目录照片压缩器图片水印抄袭检查器文件加解密这里有一些很棒的自动化脚本，你可以在你的 Python 项目中使用它们。在做项目的时候，我们需要一些现成的代码来帮助我们解决日常生活中的问题...

99+

2022-11-13

Python自动化脚本 Python 自动化
mssql 存储过程调用另一个存储过程中的结果的方法分享

摘要:下文将分享"一个存储过程"中如何调用"另一个存储过程的返回结果",并应用到自身的运算中在实际开发中，我们经常会遇到在一个存储过程中调用另一个存储过程的返回结果...

99+

2022-10-18