服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 分享12个Webpack中常用的Loader(小结)

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

2022-02-20 17:37蛙人 js教程

这篇文章主要介绍了分享12个Webpack中常用的Loader(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

初衷： 整理一些常用的loader分享给大家，方便知道在什么场景下该用什么loader。如果有大佬都懂悄悄左滑就行，不喜勿喷。
适合人群： 前端初级开发。

style-loader

用途： 用于将css编译完成的样式，挂载到页面style标签上。需要注意loader执行顺序，style-loader放到第一位，因为loader都是从下往上执行，最后全部编译完成挂载到style上
安装

?
1
cnpm i style-loader -D

配置
webpack.config.js

?
1
2
3
4
5
6
7
8
9
10
module.exports = {
 module: {
  rules: [
   {
    test: /\.css/,
    use: ["style-loader"]
   }
  ]
 }
}

css-loader

用途： 用于识别.css文件, 处理css必须配合style-loader共同使用，只安装css-loader样式不会生效。
安装

?
1
cnpm i css-loader style-loader -D

配置
webpack.config.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
 module: {
  rules: [
   {
    test: /\.css/,
    use: [
     "style-loader",
     "css-loader"
    ]
   }
  ]
 }
}

sass-loader

用途：css预处理器，我们在项目开发中经常会使用到的，编写css非常便捷，一个字 "棒"。
安装

?
1
cnpm i sass-loader@5.0.0 node-sass -D

配置
index.js

?
1
2
3
4
5
6
7
import "index.scss"
 
index.scss
body {
 font-size: 18px;
 background: red;
}

webpack.config.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
 module: {
  rules: [
   {
    test: /\.scss$/,
    use: [
     "style-loader",
     "css-loader",
     "sass-loader"
    ],
    include: /src/,
   },
  ]
 }
}

postcss-loader

用途： 用于补充css样式各种浏览器内核前缀，太方便了，不用我们手动写啦。
安装

?
1
cnpm i postcss-loader autoprefixer -D

配置
postcss.config.js

如果不写在该文件呢，也可以写在postcss-loader的options里面，写在该文件跟写在那里是同等的

?
1
2
3
4
5
6
7
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
 module: {
  rules: [
   {
    test: /\.scss$/,
    use: [
     "style-loader",
     "css-loader",
     "sass-loader",
    "postcss-loader"
    ],
    include: /src/,
   },
  ]
 }
}

babel-loader

用途： 将Es6+ 语法转换为Es5语法。
安装

?
1
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
 module: {
  rules: [
   {
    test: /\.js$/,
    use: {
     loader: "babel-loader",
     options: {
      presets: [
       ['@babel/preset-env', { targets: "defaults"}]
      ]
     }
    }
   },
  ]
 }
}

ts-loader

用途： 用于配置项目typescript
安装

?
1
cnpm i ts-loader typescript -D

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

?
1
2
3
4
5
6
7
8
9
10
module.exports = {
 module: {
  rules: [
   {
    test: /\.ts$/,
    use: "ts-loader"
   },
  ]
 }
}

tsconfig.json

?
1
2
3
4
5
6
7
8
{
 "compilerOptions": {
  "declaration": true,
  "declarationMap": true, // 开启map文件调试使用
  "sourceMap": true,
  "target": "es5", // 转换为Es5语法
 }
}

webpack.config.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
安装

?
1
cnpm i html-loader@0.5.5 -D

建议安装低版本，高版本可能会不兼容导致报错。我这里安装的是0.5.5版本
配置
index.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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为准。
安装

?
1
cnpm i file-loader -D

配置
index.js

?
1
2
import img from "./pic.png"
console.log(img) // https://www.baidu.com/pic_600eca23.png

webpack.config.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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文件里
安装

?
1
cnpm i url-loader -D

配置
index.js

?
1
import img from "./pic.png"

webpack.config.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
安装

?
1
cnpm i html-withimg-loader -D

配置
index.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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, 以下简单了解一下，这里就不多赘述啦。
安装

?
1
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

?
1
2
3
4
5
6
import App from "./index.vue"
import Vue from 'Vue'
new Vue({
 el: "#app",
 render: h => h(App)
})

index.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

用途： 用于检查代码是否符合规范，是否存在语法错误。
安装

?
1
cnpm i eslint-loader eslint -D

配置
index.ts

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

.eslintrc.js
这里简单写几个规则

?
1
2
3
4
5
6
7
8
9
10
11
module.exports = {
 root: true,
 env: {
  browser: true,
 },
 rules: {
  "no-alert": 0, // 禁止使用alert
  "indent": [2, 4], // 缩进风格
  "no-unused-vars": "error" // 变量声明必须使用
 }
}

webpack.config.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://juejin.cn/post/6942322281913778206

  • Loader
  • Webpack

    • 延伸 · 阅读

    精彩推荐
    • js教程原生JavaScript实现轮播图

      原生JavaScript实现轮播图

      这篇文章主要为大家详细介绍了原生JavaScript实现轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      栋栋很优秀啊7042021-12-29
    • js教程关于javascript中的promise的用法和注意事项(推荐)

      关于javascript中的promise的用法和注意事项(推荐)

      这篇文章主要介绍了关于javascript中的promise的用法和注意事项,需要的朋友可以参考下...

      miyui8202021-12-31
    • js教程Vant+postcss-pxtorem 实现浏览器适配功能

      Vant+postcss-pxtorem 实现浏览器适配功能

      这篇文章主要介绍了Vant+postcss-pxtorem 实现浏览器适配,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...

      Heroin、9532022-01-17
    • js教程javascript实现点击产生随机图形

      javascript实现点击产生随机图形

      这篇文章主要为大家详细介绍了javascript实现点击产生随机图形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      半成熟、9702022-01-07
    • js教程JavaScript WeakMap使用详解

      JavaScript WeakMap使用详解

      这篇文章主要介绍了JavaScript WeakMap使用的详细介绍，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下...

      MDN7102022-01-17
    • js教程js实现验证码干扰（静态）

      js实现验证码干扰（静态）

      这篇文章主要为大家详细介绍了js实现验证码干扰，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      lzh~5242022-01-22
    • js教程基于JavaScript实现网红太空人表盘的完整代码

      基于JavaScript实现网红太空人表盘的完整代码

      这篇文章主要介绍了基于JavaScript实现网红太空人表盘的完整代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...

      js君8462022-02-20
    • js教程小程序实现商品属性选择或规格选择

      小程序实现商品属性选择或规格选择

      这篇文章主要为大家详细介绍了小程序实现商品属性选择或规格选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一...

      纸上画佳人11792022-02-17
    最近更新
    编辑推荐
    阅读排行
    热门标签
    太空人 　 文字时钟 　 Object.assign 　 removeAttribute 　 attachEvent 　 并发请求控制 　 选择图片 　 电灯开关 　 随机图形 　 点击切换 　 防止重复 　 规则集 　 arcgis.js 　 关闭广告 　 Nest.js 　 SSG 　 onShareTimeline 　 点餐程序 　 胶囊 　 mustache.js 　 元件 　 悬浮图标 　 按钮角标 　 鼠标拖曳 　 AutoJs 　 Strve.js 　 蒙板 　 mapboxgl 　 轨迹线 　 多层次 　
    © 2019-2022 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图