webpack(三)loader

这篇具有很好参考价值的文章主要介绍了webpack(三)loader。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

定义

loader用于对模块的源代码进行转换,在imporrt或加载模块时预处理文件
webpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定文件中。
webpack(三)loader,webpack,webpack,前端,node.js

webpack内部,任何文件都是模块,不仅仅是js文件
默认情况下,遇到import或者require加载模块时,webpack只支持对jsjson文件的打包,像css、scss、png等这些类型的文件,webpack则无能为力,这时候就需要配置对应的loader进行文件内容的解析。
webpack碰到不识别的模块的时候,webpack会在配置当中查找该文件的解析规则。

使用

配置方式

  • 配置文件配置
    关于loader的配置,我们是写在module.rules属性中
    • rules是一个数组的形式,可以配置多个loader
    • 每一个loader对应一个对象的形式。test:正则表达式匹配规则;use:针对匹配到文件类型,调用对应的loader进行处理
  module: {
        rules: [
            // {
            //     test: /\.css$/, //正则表达式,用于匹配要处理的文件类型
            //     use: [
            //         {
            //             loader:'css-loader'
            //         }
            //     ]
            // },
            // { //简写 一个loader,不需要参数
            //     test:/\.css$/,
            //     loader:'css-loader'
            // }

            {
                test: /\.css$/,
                //  loader执行顺序从下往上,从右往左
                // use: ['css-loader','style-loader']
                // css-loader:处理css 由于webpack无法识别
                // style-loader:在页面上生成一个style标签 把处理好的样式添加到页面上
                use: ['style-loader', 'css-loader']
            }, {
                test: /.\less$/,
                // less-loader 需要less先将文件转为css
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
  • 内联方式配置:在每个 import 语句中显式指定 loader
 import 'css-loader!../css/login.css'
  • CLI配置:在 shell 命令中指定它们

特性

  • loader支持链式调用, 执行顺序从下往上,从右往左,链中的每个loader会处理之前已处理过的资源,最终变为js代码。
  • loader 可以是同步的,也可以是异步的
  • loader 运行在 Node.js 中,并且能够执行任何操作
  • 插件(plugin)可以为 loader 带来更多特性
    可以通过loader的预处理函数,为js生态系统提供更多能力。用户现在可以更加灵活的引入细粒度逻辑,例如:打包、压缩、语言翻译和其它更多特性。

常见loader

在页面开发过程中,加载除了js之外的内容就需要配置loader进行加载

css-loader

分析 css 模块之间的关系,并合成⼀个 css

npm install --save-dev css-loader
rules: [
  ...,
 {
  test: /\.css$/,
    use: {
      loader: "css-loader",
      options: {
     // 启用/禁用 url() 处理
     url: true,
     // 启用/禁用 @import 处理
     import: true,
        // 启用/禁用 Sourcemap
        sourceMap: false,
        //css在工作过程中又找到了需要处理的css,就需要往前找一个loader进行处理
        importLoaders:1 
      }
    }
 }
]

如果只通过css-loader加载文件,这时候页面代码配置没生效,因为css-loader只是负责将.css文件进行解析,并不会将解析后的css插入到页面中,如果我们希望再完成插入style的操作,那么我们还需要另外一个loader,就是style-loader.

style-loader

css-loader 生成的内容,用 style 标签挂载到页面的 head

npm install --save-dev style-loader
rules: [
  ...,
 {
  test: /\.css$/,
    use: ["style-loader", "css-loader"]
 }
]

less-loader/scss-loader

npm install less-loader -D
rules: [
  ...,
 {
  test: /\.css$/,
    use: ["style-loader", "css-loader","less-loader"]
 }
]

babel前置工具:browserslist

项目开发过程中需要考虑浏览器的兼容性,browserslist帮助我们请求会数据
可以从caniuse.com中查看目前浏览器的使用状态
两种配置方式:

// 方式一:package.json
"browserslist":[
        ">1%",
        "last 2 version",
        "not dead"
    ]
// 方式二:新建.browserslistrc文件
> 1%
last 2 versions
not dead

项目在安装webpack之后,会带有browserslist包,里面引入了caniuse-lite
webpack(三)loader,webpack,webpack,前端,node.js

postcss-loader前置:postcss

postcss是通过js转换css的工具
样式测试网站地址:https://autoprefixer.github.io/
如果我们不先试用loader而是利用postcss本身通过命令行进行自动添加前缀

  • npm i postcss-cli -D:能够在命令行使用
  • npm i autoprefixer -D:自动添加前缀

执行npx postcss --use autoprefixer -o ret.css ./src/css/test.css
webpack(三)loader,webpack,webpack,前端,node.js

postcss-preset-env:多css处理

如果我们的代码中还需要进行其它样式的处理,还需要单独配置,比如color:#12345678支持8位数,后面两位为rgba中的透明度,针对多css处理情况可以使用postcss-preset-env其中包含多个css处理,并且包含autoprefixer

{
                test: /\.css$/,
                //  loader执行顺序从下往上,从右往左
                // use: ['css-loader','style-loader']
                // css-loader:处理css 由于webpack无法识别
                // style-loader:在页面上生成一个style标签 把处理好的样式添加到页面上
                use: ['style-loader', 'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            // plugins: [require('autoprefixer'),require('postcss-preset-env')]
                            plugins: ['postcss-preset-env']
                        }
                    }
                }]
            },

我们项目中,less文件也可能需要用到这个配置,就可以抽离出来

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

webpack.config.js

use: ['style-loader', 'css-loader',
                    'postcss-loader',
                    'less-loader']

file-loader

rules: [
  ...,
 {
  test: /\.(png|jpe?g|gif)$/,
    use: {
      loader: "file-loader",
      options: {
      	// esModule:false,  不转为esModule
        // placeholder 占位符 [name] 源资源模块的名称
        // [ext] 源资源模块的后缀
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "./images",
        // 打包后文件的 url
        publicPath: './images',
      }
    }
 }
]

url-loader

可以处理理 file-loader 所有的事情,但是遇到图片格式的模块,可以选择性的把图片转成 base64 格式的字符串,并打包到 js 中,对小体积的图片比较合适,大图片不合适。

rules: [
  ...,
 {
  test: /\.(png|jpe?g|gif)$/,
    use: {
      loader: "url-loader",
      options: {
        // placeholder 占位符 [name] 源资源模块的名称
        // [ext] 源资源模块的后缀
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "./images"
        // 打包后文件的 url
        publicPath: './images',
        // 小于 100 字节转成 base64 格式
        limit: 100
      }
    }
 }
]

asset module type

webpack5中内置了,不需要安装。在webpack5之前采用file-loader或者url-loader处理图片,在webpack5直接采用aeest进行处理即可。

asset/resource -->file-loader:发送一个单独的文件并导出 URL

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
+   assetModuleFilename: 'images/[hash][ext][query]' //导出文件名
  },
module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource'
      }
    ]
  }
// src/index.js
import icon from './assets/icon.png'
const iconImg = document.createElement('img')
iconImg.style.cssText = 'width: 200px;'
iconImg.src = icon
document.body.appendChild(iconImg)

执行webpack可以在dist中可以看到有一个.png文件出现文章来源地址https://www.toymoban.com/news/detail-694554.html

asset/inline–>url-loader:导出一个资源的 data URI

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource',
        generator: {
          filename: 'images/[hash][ext][query]'
        }
      },
+     {
+       test: /\.svg$/,
+       type: 'asset/inline'
+     }
    ]
  }
}

asset/source–>raw-loader:导出资源的源代码

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource',
        generator: {
          filename: 'images/[hash][ext][query]'
        }
      },
      {
        test: /\.svg$/,
        type: 'asset/inline'
      },
+     {
+       test: /\.txt$/,
+       type: 'asset/source'
+     }
    ]
  }
}

到了这里,关于webpack(三)loader的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端10年进化 Node.js、模块化、CommonJS、AMD、CMD、Webpack、Vue-cli、Electron-vue

    模块化的概念在软件开发领域已经存在很长时间,但在 JavaScript 中的模块化发展相对较晚。以下是对您提出的问题的回答: 提出时间:JavaScript 中的模块化概念相对较早地提出于 CommonJS 规范。CommonJS 是一种 JavaScript 模块化规范,最早在 2009 年由 Ryan Dahl 和其他社区成

    2024年02月11日
    浏览(79)
  • Webpack5 core-js和babel-loader区别和用法

    core-js是一个流行的JavaScript库,它提供了对新的JavaScript特性、API和方法的兼容性支持。它通过模拟缺失的功能,并提供 polyfill 来使这些功能可以在旧版浏览器中正常运行 polyfill 翻译过来叫做垫片/补丁。就是用社区上提供的一段代码,让我们在不兼容某些新特性的浏览器上,

    2024年02月13日
    浏览(39)
  • ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!

    Vue项目中执行打包命令 npm run build,出现以下报错 删除node_modules包后,重新装包,发现还是无法打包。 原因: 在原来镜像源的地址上,已经找不到这个插件了,没有装上,导致打包报错了。 解决方法: 1、更换镜像源 换成淘宝镜像源或者其他源,删除node_modules包后,再重新

    2024年02月15日
    浏览(38)
  • 在uniapp开发编译成小程序时,模板编译错误Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/

    解决方案:应该是你的ifdef 和 endif不匹配。你自己看看你的代码,是不是有的地方只有一个endif或者只有ifdef,或者说写错了,检查下。我的就是少了endif. 希望我的解决方案能帮到你

    2024年02月16日
    浏览(53)
  • Node.js与Webpack笔记(二)

    上一篇:Node.js与Webpack笔记(一)-CSDN博客 1.Webpack简介以及体验 webpack是一个静态模块打包工具,从入口构建依赖图,打包有关的模块,最后用于展示你的内容 静态模块:编写代码过程中,html,css,js,图片等固定内容的文件 打包过程,注意:只有和入口有直接/间接引入关系

    2024年03月10日
    浏览(83)
  • 第三节:Node.js 之 Webpack 打包

    官网网址:https://webpack.docschina.org/ 减少文件数量,缩减代码体积,提高浏览器打开速度。 用于分析、并打包代码。支持所有类型文件的打包,其本质是一个第三方模块包。 初始化包环境 安装依赖包 配置package.json 的 scripts(自定义命令) 在根目录下新建 src 文件夹, 所有要

    2024年02月15日
    浏览(53)
  • swc-loader Segmentation fault “$NODE_EXE“ “$NPM_CLI_JS“ “$@“

    webpack + swc swc还不是很稳定。 在swcrc 中有配置plugins 时,swc 转换 /node_modules/ 会报错。 @swc/cor@1.3.62 swc-loader@0.2.3 swc-plugin-vue-jsx@0.2.5 配两套rule,一套处理项目代码,一套处理node_modules webpack.config.js swcrc mode: entry 稳定一点。用usage会出问题。 果然是experimental.plugin, 实验性featur

    2024年02月11日
    浏览(47)
  • Node.js入门与 Webpack模块打包工具

    目录 Node.js入门 fs模块-读写文件 path模块-路径处理  压缩前端html 认识URL中的端口号 http模块-创建Web服务 体验 Web 服务除了接口数据以外,还能返回网页资源等  Node.js模块化  ECMAScript标准-默认导出和导入 ECMAScript标准-命名导出和导入  包的概念 npm软件包管理器 npm安装所有依

    2024年02月11日
    浏览(44)
  • Module build failed (from ./node_modules/postcss-loader/src/index.js):

    出现该错误是你可能没认真看官网的安装配置,可直接看该目录3,一个字一个字看 先安装uview 如果选择v1版本,建议使用npm下载,下面以v1版本为例,使用的是npm下载,导入uview时该文件也在node_modules文件夹里面,未移动。 然后就是配置 在项目根目录中的main.js中,引入并使

    2024年02月05日
    浏览(61)
  • 【Module build failed (from ./node_modules/sass-loader/dist/cjs.js):】

    @[TOC](Module build failed (from ./node_modules/sass-loader/dist/cjs.js):) 跑新项目的时候报错,研究了半天,主要报Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 可以npm uninstall sass-loader和npm uninstall node-sass,在安装npm install sass-loader 和node-sass原因是sass-loader的版本问题,只适应相对的

    2024年01月19日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包