webpack: 4 loader汇总(style-loader等)

news2024/9/21 2:48:19

所有的loader必须匹配规则，否则不生效
配置文件中，module中rules的use执行顺序是从后往前执行

url-loader

用于将文件转换为base64 URI的webpack加载程序。

options

limit limit指定文件大小，小于limit的图片不会生成图片以base64格式被引入，大于limit的图片将以url加载

在这里插入图片描述示例

/src/index.js

import '/src/css/image.css'
let img = require('/src/imgs/2.png')
// import img from '/src/imgs/2.png'

let dom = document.createElement('div')
dom.className = 'img1'

document.body.appendChild(dom)

/src/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 40
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', {
          loader: 'css-loader',
          options: {
            esModule: false // css-loader遇到url会按照require进行导入,而require默认返回包裹default的esmodule
          }
        }]
      }
    ],
  }
}

/src/css/image.css

.img1 {
  width: 200px;
  height: 200px;
  background: url(../imgs/1.png);
}

/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>Document</title>
</head>
<body>
  <script src="./dist/main.js"></script>
</body>
</html>

file-loader

将文件的import/require（）解析为url，并将文件发送到输出目录

1） options
name 根据查询参数指定模板文件名模板
outputPath 指定模板文件的路径
publicPath 指定模板文件的公共路径
postTransformPublicPath 对生成的公共路径进行后期处理的自定义函数

2）Placeholders

文件规则

示例
1. img标签的src引入图片
1.1 import引入
/src/index.js

import img from '/src/imgs/1.png';  

let dom = document.createElement('img')
dom.src = img

document.body.appendChild(dom)

/src/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>Document</title>
</head>
<body>
  <script src="./dist/main.js"></script>
</body>
</html>

/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          }
        ]
      },
    ],
  }
}

webpack命令执行后可以正常打包并查看效果
1.2 require导入

在webpack5及之后版本，结合file-loader，file-loader返回的是对象， 里面的default才是我们需要的资源
/src/index.js

// import img from '/src/imgs/1.png';
let img = require('/src/imgs/2.png').default // 在file-loader高版本的返回值

let dom = document.createElement('img')
dom.src = img

document.body.appendChild(dom)

或者在webpack.config.js中配置
/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false // 配置项
            }
          }
        ]
      },
    ],
  }
}

2. background背景图片引入
/src/index.js

import '/src/css/image.css'
let img = require('/src/imgs/2.png')

let dom = document.createElement('div')
dom.className = 'img1'

document.body.appendChild(dom)

/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', {
          loader: 'css-loader',
          options: {
            esModule: false // css-loader遇到url会按照require进行导入,而require默认返回包裹default的esmodule
          }
        }]
      }
    ],
  }
}

/src/css/image.css

.img1 {
  width: 200px;
  height: 200px;
  background: url(../imgs/1.png);
}

/src/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>Document</title>
</head>
<body>
  <script src="./dist/main.js"></script>
</body>
</html>

babel-loader

babel-loader官网

这个包允许使用Babel和webpack转换JavaScript文件

安装和使用

Options选项

同babel插件一样，见babel官网
额外的配置选项
cacheDirectory 默认为false,未来的webpack构建将尝试从缓存中读取，以避免每次运行时都需要运行可能代价高昂的Babel重新编译过程
cacheIdentifier 默认值是由@babel/core的版本、babel加载程序的版本、内容组成的字符串。babelrc文件（如果存在），以及环境变量BABEL_ENV的值，该变量具有节点_ENV环境变量的回退。可以将其设置为自定义值，以便在标识符更改时强制销毁缓存。
cacheCompression 默认为true。设置后，每个babel变换输出都将用Gzip压缩。如果您想退出缓存压缩，请将其设置为false——如果您的项目可以传输数千个文件，那么它可能会从中受益。
customize 导出自定义回调的模块的路径，就像您要传递给的回调一样
metadataSubscribers 默认值[]。获取上下文函数名数组。例如，如果你传递了[‘myMetadataPlugin’]，你会给上下文分配一个subscribes函数。myMetadataPlugin在你的网页插件的钩子中&这个函数将被元数据调用。

测试

对语法做兼容性处理

let b = () => {} // 如果指定浏览器版本会发现没有被转换，如chrome 91

function func (b = false) {return false}

// class Person {
// }

//let post = async () => {
//}
//await post()

//let obj  = {a:1,b:2}
//console.log(...obj)

babel-loader的使用

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
          // 配置选项去走babel.config.json配置文件
        }
      }
    ]
  }
}

// babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

postcss和postcss-loader

A tool for transforming CSS with JavaScript 通过js转换css的工具

https://postcss.org/

npm i postcss-cli -D // 安装依赖

1） 开始sample

 npm i -D postcss
 npm i postcss-cli@8.3.0 -D 
 // postcss *.css -o res.css   test.css       // 这个不会有变化
 npx postcss *.css --use autoprefixer -d build/    // 这个得到兼容的代码

2） 结合webpack使用

module.exports = {
module: {
        rules: [
	            {
	                test: /\.css$/,
	                use: ['style-loader', 'css-loader',{
	                    loader: 'postcss-loader',
	                    options: {
	                        postcssOptions: {
	                            plugins: [
	                            // require('autoprefixer'),
	                            'postcss-preset-env' // 这是个工具包集合，包括autoprefixer
	                        ]
	                        }
	                    }
	                }]
	            }
	        ]
	    }
 }

示例
示例样式
//src/css/image.css

@import url('./2.css');

i {
  width: 200px;
  height: 200px;
  background: linear-gradient(red, black);
}

::placeholder { // 需要加前缀(兼容后会添加浏览器厂商前缀)
  color: gray;
}

/ src/css/2.css

i {
  color: #33333315; // 需要兼容性处理 (兼容处理后得到rgba形式了)
}

/postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-preset-env')
  ]
}

/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>Document</title>
</head>
<body>
  <script src="./dist/main.js"></script>
</body>
</html>

style-loader 多个文件导入loader处理

// 文件base.css
@import './base.css';

// 文件login.css
.title {
    color: red;
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1 // 工作时找到其其它css，让前1个的loader取处理
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [
                                // require('autoprefixer'),
                                'postcss-preset-env' // 这是个工具包集合，包括autoprefixer
                            ]
                        }
                    }
                }]
            }
        ]
    }
  };

分析

module中rules的use执行顺序是从后往前执行
处理base.css：

  1. postcss-loader通过postcss-preset-env插件对base.css进行加前缀等兼容处理
  2. 执行css-loader发现@import引入的文件，importLoaders: 1交给前面一个loader（postcss-loader）处理
    // css-loader可以处理 import / require的文件， 得到样式的数组
  3. style-loader 将样式处理得到style标签

filer-loader处理import/require引入的图片

import importImg from '../assets/xx.png' // import导入

function packageImage() {
    // let img = require('../assets/xx.png').default // require导入
    return `
    <img src="${importImg}" />
    `
}

document.body.innerHTML += packageImage();

  module.exports =  {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: {
                    loader: 'file-loader',
                    options: {
                        esModule: false // 不转为esModule
                    }
                }
            }
        ]
    }
  }

file-loader 处理 css中background-image引入的图片, 并自定义打包后的名称及存放路径

// /src/css/image.css
.bg {
    background-image: url(../assets/xx.png);
    background-size: cover;
    width: 200px;
    height: 400px;
}

// /src/js/login.js
import '../css/login.css'

function login() {
    return `
    <div class="title">login-title</div>
    `
}

document.body.innerHTML += login();

  module.exports =  {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1, // 工作时找到其其它css，让前1个的loader取处理
                        esModule: false
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [
                                // require('autoprefixer'),
                                'postcss-preset-env' // 这是个工具包集合，包括autoprefixer
                            ]
                        }
                    }
                }
                
            ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: {
                    loader: 'file-loader',
                    options: {
                        esModule: false, // 不转为esModule
                        name: '[name].[hash:6].[ext]', // 保留原文件名name，加上6位文件hash，ext后缀
outputPath: 'img' // 存放路径
                    }
                }
            }
        ]
    }
  }

raw-loader处理.txt文件

// file.txt
file123

// webpack.config.js
  module.exports =  {
    module: {
        rules: [
            {
                test: /\.txt$/i,
                use: {
                    loader: 'raw-loader',
                    options: {
                        esModule: false
                    }
                }
            }
        ]
    }
  }

url-loader处理图片

      module.exports =  {
        module: {
            rules: [
                {
                    test: /\.(png|jpe?g|gif|svg)$/i,
                    use: 
                    {
                        loader: 'url-loader',
                        options: {
                            esModule: false, // 不转为esModule
                            name: '[name].[hash:6].[ext]', // 保留原文件名name，加上6位文件hash，ext后缀
                            outputPath: 'img', // 存放路径
                            limit: 25 * 1024 // 大于25字节不做处理
                        }
                    }
                }
            ]
        }
      }

less-loader处理less

module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            importLoaders: 1 // 工作时找到其其它css，让前1个的loader取处理
          }
        },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  // require('autoprefixer'),
                  'postcss-preset-env' // 这是个工具包集合，包括autoprefixer
                ]
              }
            }
          },
          "less-loader"
        ]
      }
    ]
  }

​

scss-loader

npm i sass-loader node-sass style-loader css-loader babel-core babel-loader@7 //处理.scss后缀的文件

​​在这里插入图片描述

在这里插入图片描述

​

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/512212.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

客观地说，应该看一看 Web3.0 了

客观地说，应该看一看 Web3.0 了

武术圈有名言&#xff1a;“八极加劈挂&#xff0c;神鬼都害怕”。要是 Web3.0AGI 的话&#xff0c;世界将会变成什么样子&#xff1f; 数科星球原创作者丨苑晶编辑丨大兔 Web3.0 的价值开始受到重视&#xff0c;在最近&#xff0c;来自香港的好消息再次带火了这个领域的热度。…
阅读更多...
VMware NSX-T Data Center 3.2.3 - 数据中心网络全栈虚拟化

VMware NSX-T Data Center 3.2.3 - 数据中心网络全栈虚拟化

VMware NSX-T Data Center 3.2.3 - 数据中心网络全栈虚拟化 重要更新&#xff1a;修复 136 个 bug。 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-nsx-t-3/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org VMwa…
阅读更多...
ChatGPT 接入飞书教程，创建自己的聊天机器人

ChatGPT 接入飞书教程，创建自己的聊天机器人

ChatGPT 接入飞书教程，创建自己的聊天机器人 一、飞书进入开发者平台。点击创建应用。二、打开Aircode，点击创建应用，上面输入名字，下面选择Node.js v16三、配置环境，点击Environments，创建四个变量，全部要大写本教程收集于： AIGC从入门到精通教程 首先，准备三个账号…
阅读更多...
FPGA实现MPEG2视频压缩PCIe传输 提供软硬件工程源码和技术支持

FPGA实现MPEG2视频压缩PCIe传输 提供软硬件工程源码和技术支持

目录 1、前言2、MPEG2视频压缩实现3、我已有的FPGA图像视频编解码方案4、我已有的PCIE方案5、MPEG2视频压缩PCIE传输设计方案FPGA硬件设计软件设计 6、Vivado工程详解7、Linux下的XDMA驱动安装8、上板调试验证9、福利&#xff1a;工程代码的获取 1、前言 MJPEG、MPEG2、MPEG4、…
阅读更多...
IOS开发指南之storyboard中控件与变量关联及控件事件与方法关联

IOS开发指南之storyboard中控件与变量关联及控件事件与方法关联

1.创建IOS工程 2.选择 interface为storyboard,语言选择Objective-C 打开工程后可看到工程默认添加了两个storyboard文件 Main.storyboard为应用主场景,LaunchScreen为启动屏幕场景 3.双击Main.storyboard打开设计窗口,并拖放控件布局如下 4.为控件添加关联变量与(IBOutlet与I…
阅读更多...
身高测量仪红外传感测距模块应用方案 WTU201F2 B004 低功耗

身高测量仪红外传感测距模块应用方案 WTU201F2 B004 低功耗

​身高测量仪被广泛用于医疗、教育等领域&#xff0c;而红外测距模块在身高测量仪中的应用则成为了一种新的技术手段。红外测距模块是基于红外线技术的一种测距器件&#xff0c;在身高测量仪中&#xff0c;红外测距模块能够精准地测量出人体的高度。与传统的测量方法相比&#…
阅读更多...
品牌如何从零开始运营抖音，带你全面了解

品牌如何从零开始运营抖音，带你全面了解

随着短视频逐渐深入我们的生活&#xff0c;巨大的流量吸引了众多人群。很多人因此也想开始做抖音&#xff0c;很多品牌却因为内容制作流程复杂&#xff0c;不知从何入门。今天&#xff0c;和大家分享下品牌如何从零开始运营抖音。 其实在开始一件事情之前&#xff0c;最主要的是…
阅读更多...
智能感测离子风棒，托起中国“智”造新高度

智能感测离子风棒，托起中国“智”造新高度

智能感测离子风棒采用市面上较为少见的内置感测型离子发生器&#xff0c;能够对外界环境电荷进行快速平衡。该设备智能控制&#xff0c;无需人工点检&#xff0c;达到全自动静电消除并具备异常报警功能。能让ESD管理者或使用者先一步发现问题&#xff0c;快速准确的解决问题 。…
阅读更多...
Shell脚本例题

Shell脚本例题

1.计算从1到100所有整数的和 2.提示用户输入一个小于100的整数&#xff0c;并计算从1到该数之间所有整数的和 3.求从1到100所有整数的偶数和、奇数和 4.用户名存放在users.txt文件中&#xff0c;每行一个&#xff0c;判断文件里的用户是否存在&#xff0c;若该用户存在&#xf…
阅读更多...
京喜APP - 图片库优化 | 京东云技术团队

京喜APP - 图片库优化 | 京东云技术团队

作者&#xff1a;京东零售 何骁 介绍 京喜APP早期开发主要是快速原生化迭代替代原有H5&#xff0c;提高用户体验&#xff0c;在这期间也积累了不少性能问题。之后我们开始进行一些性能优化相关的工作&#xff0c;本文主要是介绍京喜图片库相关优化策略以及关于图片相关的一些…
阅读更多...
es 7.0.8 常用DSL语句进行索引crud操作（windows es7.x）

es 7.0.8 常用DSL语句进行索引crud操作（windows es7.x）

一 es7.x的核心 1.1 es的核心概念 1.ES 里的 Index 可以看做一个库(名称必须为小写)&#xff0c;而 Types 相当于表&#xff0c;Documents 则相当于表的行。 2.这里 Types 的概念已经被逐渐弱化&#xff0c;Elasticsearch 6.X 中&#xff0c;一个 index 下已经只能包含一个…
阅读更多...
postgresql数据库linux centos7 安装

postgresql数据库linux centos7 安装

简介 &#xff08;百度百科&#xff09; PostgreSQL是一种特性非常齐全的自由软件的对象-关系型数据库管理系统&#xff08;ORDBMS&#xff09;&#xff0c;是以加州大学计算机系开发的POSTGRES&#xff0c;4.2版本为基础的对象关系型数据库管理系统。POSTGRES的许多领先概念只…
阅读更多...
Linux基础学习---1、目录结构、Vim编辑器、网络配置和远程登录

Linux基础学习---1、目录结构、Vim编辑器、网络配置和远程登录

1、Linux目录结构 1.1 /bin 是Binary的缩写&#xff0c;这个目录存放着最经常使用的命令。1.2 /sbin s是Super User的意思&#xff0c;这里存放的是系统管理员使用的系统管理程序。1.3 /home 存放普通用户的主目录&#xff0c;在Linux中每个用户都有一个自己的目录&#xff…
阅读更多...
海睿思分享 | 浅谈智能数据治理

海睿思分享 | 浅谈智能数据治理

随着大数据和AI技术的发展&#xff0c;利用企业内外部海量数据进行融合、治理、分析和应用&#xff0c;已成为企业经营管理越来越重要的手段。如何构建企业大数据分析平台发挥数据价值正成为企业数字化转型的核心战略任务。 基于大数据平台进行数据分析的完整流程分为&#xf…
阅读更多...
MyBatis--映射关系一对一和MyBatis--映射关系多对一 -都有基于xml和注解的教程

MyBatis--映射关系一对一和MyBatis--映射关系多对一 -都有基于xml和注解的教程

目录 MyBatis--映射关系一对一 映射关系-官方文档 映射关系1 对1-基本介绍 注意细节 映射方式 方式1 创建idencardv 表 创建person表 创建新的 module(mybatis-mapping), 相关配置文件可以从上一个 module 拷贝 创建IdenCard.java对应表类 创建Person.java对应表类…
阅读更多...
Vue2相关面试题（持续更新）

Vue2相关面试题（持续更新）

前言 目前这套面试题只适合 初级前端&#xff0c;后面会进行深层次补充和拓展以及Vue2源代码的讲解&#xff08;虽然Vue2今年开始不维护了&#xff0c;但是我的面试题不会止步&#xff0c;冲冲冲&#xff09;。在面试的过程中&#xff0c;一定要清楚哪些该说哪些不该说&#x…
阅读更多...
云剪辑-B端在线剪辑⼯具架构设计与演进

云剪辑-B端在线剪辑⼯具架构设计与演进

腾讯云音视频的云剪辑致力于让客户在自己的应用&#xff08;Web、小程序&#xff09;中快速集成剪辑能力&#xff0c;同时强大的模板能力能够极大地提升视频生产效率。我们在探索B端在线剪辑产品的过程中遇到不少挑战&#xff1a;如何满足快速与定制两种集成场景&#xff1f;如…
阅读更多...
Linux性能监控

Linux性能监控

一、htop 安装&#xff1a;yum install htop -ytop是linux下常用的监控程序&#xff0c;htop相当于其加强版&#xff0c;颜色显示不同参数&#xff0c;且支持鼠标操作&#xff0c;相对于top简单和人性化&#xff01;第一行与第二行&#xff0c;显示CPU当前的运行负载&#xff…
阅读更多...
F407标准库之时钟系统

F407标准库之时钟系统

主要参考正点原子数据手册和源码资料等。 第19讲 STM32时钟系统精讲_哔哩哔哩_bilibili 此处记录较为重要或者较易出错的一些遗漏之处&#xff0c;作为补充。 一般而言&#xff0c;时钟越高&#xff0c;速度越快&#xff0c;但同时抗干扰能力也越差&#xff0c;功耗也越高&am…
阅读更多...
java入门学习

java入门学习

输入 数字输入&#xff08;为什么类型的数字就是sc.next类型&#xff09;float sumsc.nextFloat() int xsc.nextInt(); import java.util.Scanner;public class 相加问题 {public static void main(String[] args){Scanner scnew Scanner(System.in);int xsc.nextInt();int …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023