webpack中的loader

最新推荐文章于 2024-06-18 09:46:46 发布
最新推荐文章于 2024-06-18 09:46:46 发布
阅读量3.8k 收藏 12
点赞数 1
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52135740/article/details/118612489
版权

什么是loader

loader是webpack中一个非常核心的概念。

webpack用来做什么呢？

在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。

但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括 一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。

对于webpack本身的能力来说，对于这些转化是不支持的。

我们需要给webpack扩展对应的loader就可以了。

loader使用过程：

步骤一：通过npm安装需要使用的loader

步骤二：在webpack.config.js中的modules关键字下进行配置

大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法

1.webpack中使用css文件的配置

先建好目录

在这里插入图片描述

在main.js文件中添加依赖

main.js

//1.使用commonjs的模块化规范
const {add,mel} = require('./js/mathList.js')
console.log(add(10,20));
console.log(mel(10,20));
//2.使用ES6的模块化规范
import { name,age,height } from './js/info';
console.log(name);
console.log(age);
console.log(height);
//3.依赖css文件
require("./css/normal.css")                   //添加依赖

安装loader

webpack官网：https://webpack.docschina.org/loaders/style-loader/

npm install --save-dev style-loader css-loader

webpack@3.6.0对应：

npm install --save-dev style-loader@0.23.1
npm install --save-dev css-loader@2.0.2

对webpack.config.js进行配置

const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.css$/i,
            //css-loader只负责将css文件进行加载
            //style-loader负责将样式添加到DOM中
            //使用多个loader时，是从右向左
            use: ["style-loader","css-loader"],
          },
        ],
      },
}

webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。

最后启动打包即可：

npm run build

2.webpack中使用less文件的配置

新建一个less文件

@fontSize: 50px;
@fontColor:orange;
body{
    font-size: @fontSize;
    color: @fontColor;
}

在入口文件进行引入（main.js）:

//1.使用commonjs的模块化规范
const {add,mel} = require('./js/mathList.js')
console.log(add(10,20));
console.log(mel(10,20));
//2.使用ES6的模块化规范
import { name,age,height } from './js/info';
console.log(name);
console.log(age);
console.log(height);
//3.依赖css文件
require("./css/normal.css")
//4.依赖less文件
require("./css/index.less")

document.writeln('<h2>你好啊，webpack</h2>')

对应webpack@3.6.0版本

 npm install less@3.9.0 less-loader@4.1.0

最新版本：

 npm install less less-loader

配置package.json

const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.css$/i,
            //css-loader只负责将css文件进行加载
            //style-loader负责将样式添加到DOM中
            //使用多个loader时，是从右向左
            use: ["style-loader","css-loader"],
          },
          {
            test: /\.less$/i,
            loader: [
              // compiles Less to CSS
              'style-loader',
              'css-loader',
              'less-loader',
            ],
          },
        ],
      },
}

最后启动打包即可：

npm run build

3.webpack中图片文件的处理

webpack@3.6.0 对应如下操作：

（最新版本观看官网，使用原理大同小异 ： https://webpack.docschina.org/loaders/file-loader/）

如果图片大小小于自己设定的limit值时：webpack会将图片编译成base64字符串

如果图片大小大于limit时：就需要安装file-loader模块进行加载 （在最新版中不论大小，只需要file-loader即可）

在这里插入图片描述

安装url-loader

npm install --save-dev url-loader@1.1.2

安装file-loader

npm install file-loader@3.0.1 --save-dev

webpack.config.js

const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        publicPath:'dist/'
    },
    module: {
        rules: [
          {
            test: /\.css$/i,
            //css-loader只负责将css文件进行加载
            //style-loader负责将样式添加到DOM中
            //使用多个loader时，是从右向左
            use: ["style-loader","css-loader"],
          },
          {
            test: /\.less$/i,
            loader: [
              // compiles Less to CSS
              'style-loader',
              'css-loader',
              'less-loader',
            ],
          },
          {
            test: /\.(png|jpg|gif)$/,
            use:[
              {
                loader:'url-loader',
                options:{
                  //当加载的图片，小于limit时，会将图片编译成base64字符串形式
                  //当加载的图片，大于limit时，需要使用file-loader模块进行加载
                  limit:15000,
                  name: 'img/[name].[hash:8].[ext]',
                }
              }
            ]
          },
        ],
      },
}

图片文件处理修改文件名称：

默认情况下webpack会自动帮助我们生成一个32位hash值，防止名字重复。

但是，真是开发中，我们可能对打包的图片名字有一定的要求。

所有我们可以在options中添加如下选项：

1.img：文件要打包到的文件夹

2.name：获取图片原来的名字，放在该位置

3.hash:8：为了防止图片名称冲突，使用hash，但是只保留8位。

4.ext：使用图片原来的扩展名

name: 'img/[name].[hash:8].[ext]',

本代码案例的效果：

在这里插入图片描述

还有一个问题，在默认情况下，webpack会将生成的路径直接返回给使用者。但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要给路径 下添加一个dist/

在这里插入图片描述

4.webpack中ES6转ES5的babel

webpack@3.6.0 对应如下操作：

（最新版本观看官网，使用原理大同小异 ： https://webpack.docschina.org/loaders/file-loader/）

安装babel-loader、babel-core、babel-preset-es2015

npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3  babel-preset-es2015@6.24.1

webpack.config.js

{
     test: /\.js$/,
     //exclude 排除
     //include 包含
     exclude: /(node_modules|bower_components)/,
       use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
       }
}

然后重新打包即可

npm run build

5.webpack中使用Vue的配置

webpack@3.6.0 对应的如下操作：

我们希望在项目中使用Vue.js,那么必然需要对其有依赖，所有需要先进行安装

注：因为我们后续是在实际项目中也会使用vue的，所有并不是开发时依赖

npm install vue@2.5.21 --save

Vue中 runtime-compiler 和 runtime-only 两种模式

1.runtime-only -> 代码中，不可以有任何的template

2.runtime-compiler -> 代码中，可以有template，因为compiler可以用于编译template

webpacke.config.js配置

resolve:{
      alias:{
        //alias 别名
        'vue$':'vue/dist/vue.esm.js'       //配置runtime-compiler模式
      }
    }

在这里插入图片描述

main.js入口文件

//5.使用vue进行开发
import Vue from 'vue'
const app = new Vue({
    el:'#app',
    data:{
        message:'hello webpack'
    }
})

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>
    <div id="app">
        <div>{{message}}</div>
    </div>
</body>
<script src="./dist/bundle.js"></script>

</html>

6. .vue文件封装处理

webpack@3.6.0 对应的如下操作：

安装vue-loader和vue-template-compiler

npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev

配置webpack.config.js文件

{
  test: /\.vue$/,
  loader: ['vue-loader'],
}

封装App.vue

<template>
  <div>
    <div class="active">
      {{ message }}
    </div>
    <button @click="btnClick">按钮</button>
    <Cpn />
  </div>
</template>
<script>
import Cpn from "./Cpn";
export default {
  name: "App",
  data() {
    return {
      message: "hello webpack vue",
    };
  },
  methods: {
    btnClick() {
      console.log("vue");
    },
  },
  components: {
    Cpn,
  },
};
</script>
<style scoped>
.active {
  color: green;
}
</style>

main.js

import Vue from 'vue'
import App from "./vue/App.vue"
new Vue({
    el:'#app',                   //对index.html中的#app进行绑定
    template:'<App />',			 //模板App替换#app
    components:{
        App
    }
})

解决拓展名简写问题

对webpack.config.js进行配置

resolve:{
      extensions:['.js','.css','.vue'],            //解决引入文件简写问题。添加这一行就可以简写
      alias:{
        //alias 别名
        'vue$':'vue/dist/vue.esm.js'              //配置runtime-compiler模式
      }
    }

在这里插入图片描述

坏萝卜
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack中的 loader
兮动人
05-03 2500
文章目录1. loader 概述2. loader 的调用过程3. 打包处理 css 文件4. loader 调用过程图解5. 打包处理 less 文件6. 打包处理样式表中与 url 路径相关的文件7. 打包处理 js 文件中的高级语法7.1 安装 babel-loader 相关的包7.2 配置 babel-loader8. 完整实例代码 1. loader 概述 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不
webpack之loader
A____t的博客
04-24 690
webpack打包css文件、less样式文件、图片文件、ES6转ES5
引领文件管理新潮流：File Loader——您的安卓开发好帮手
最新发布
gitblog_00091的博客
06-18 405
引领文件管理新潮流：File Loader——您的安卓开发好帮手 项目地址:https://gitcode.com/kk121/File-Loader 在当今移动应用开发领域，数据处理与文件管理是不可或缺的关键环节。为了帮助开发者更高效地处理各种类型的文件加载、缓存以及检索需求，我们今天要向大家隆重推荐一款功能强大的Android库——File Loader。 解析File Loader：打造一站...
webpack中常见的Loader
努力的鋜
08-13 532
因为loader支持链式调用，链中的每个loader会处理之前已处理过的资源，最终变为js代码。可以处理理 file-loader 所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成 base64 格式的字符串，并打包到 js 中，对小体积的图片比较合适，大图片不合适。像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析。webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。
深度解读Webpack中的loader原理
发果叁
02-15 603
webpack 是一个现代 JavaScript 应用的静态模块打包器。那么 webpack 是怎样实现不同种类资源模块加载的呢？没错就是通过 loader。loader 用于对模块的源代码进行转换。loader 可以使你在 import 或加载模块时预处理文件。我们带着下面几个问题，彻底吃透 loader ～loader 就是一个函数，一旦有模块被 import 或者 require 时它就会去拦截这些模块的源码，对其进行改造，然后输出到另一个模块中，循环往复，最终输出到入口文件中，形成最终的代码。
Webpack的loader
JasonTanTJX的博客
11-13 455
想必很多前端的小伙伴在面试的时候都或多或少会被问到关于Webpack的各种“灵魂拷问”吧...请看官大大了解一波Webpack的loader。
Webpack中loader打包各种文件的方法实例
10-16
更推荐的第二种方法是在`webpack.config.js`中配置`module.rules`，添加一条针对`.css`文件的规则，使用数组`use`来指定`style-loader`和`css-loader`的顺序，`css-loader`先对CSS进行解析，然后`style-loader`将其...
详解webpack自定义loader初探
01-19
最近负责的Weex项目涉及到一些构建上的问题，需要通过自定义webpack的loader去实现，于是学习了一下这方面的知识，写一篇文章做个总结，以免遗忘。 webpack想必前端圈的人都知道了，大多数人也都或多或少的用过。...
image-webpack-loader:用于webpack的图像加载器模块
04-27
安装$ npm install image-webpack-loader --save-dev安装在容器中node:12-buster 无需其他准备工作。 所有依赖项将自动编译。 由于图像较大（〜1 GB），因此不建议使用。node:12-buster-slim 准备脚本： apt-get ...
Vue.js知识——webpack、loader、Vue的配置
xiaotangyu7dong的博客
09-03 743
Vue.js知识webpack的基本使用webpack.config.js配置和package.json配置loadercss文件处理 webpack的基本使用 webpack版本：3.6.0 在文件下创建两个文件夹： src，源文件 dist，存放打包之后的文件 src文件夹下：写入两个文件 main.js(入口文件) （CommonJS的导入方式） const {add,mul} = require("./aaa.js") console.log(add(20,30)); console.log
webpack3.6.0版本对应下载的loader版本
zxxz123456的博客
04-29 3187
学习webpack的时候因为loder的版本对不上会报错TypeError: this.getResolve is not a function webpack为3.6.0的时候，常用loder版本如下
webpack中 webpack.config.js====output，Loaders
weixin_49346957的博客
06-08 309
webpack ： output属性简单来说，就是用来设置打包后的文件位置 loaders：webpack 中非常核心的内容之一，前面我们说的非 js 类型的模块处理就靠它了，不同类型的模块的解析就是依赖不同的 loader 来实现的 plugins：webpack 中另外一个核心的内容，它主要是扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等 output： 先看配置代码 const path = require('path') /
webpack的loader加载器
weixin_46274192的博客
10-16 330
1.loader概述 在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会出错。 loader加载器的作用：协助webpack打包处理特定的文件模块。 比如： css-loader可以打包处理.css相关的文件 less-loader可以打包处理.less相关的文件 babel-loader可以打包处理webpack无法处理的高级js语法。 2.loader调用过程
webpack的loader和plugin的区别
weixin_30244889的博客
02-25 889
【Loader】：用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为dataURL。比如说：CSS-Loader，Style-Loader等。 loader的使用很简单： 在webpack.config.js中指定l...
webpack中有哪些常见的loader?
weixin_47450807的博客
04-09 3986
1、file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件。 2、url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去。 3、source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试。 4、image-loader：载并且压缩图⽚⽂件。 5、babel-loader：将ES6转化为ES5。 6、css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性
webpack中常见loader的作用和使用方法
kgjfk的博客
02-24 3704
webpack中常见的loader有哪些？它们的作用是什么呢？ 之前我们有说到，webpack默认情况下只认识.js结尾的文件，要打包其它类型的文件，则我们需要在webpack.config.js文件中进行配置，只有通过正确的配置后，当webpack进行打包时才能对其它类型的文件进行正确的打包，那我们最常打包的文件类型有哪些呢？ 1.file-loader file-loader可以用于图片资源的打包配置，当我们只配置loader时，那打包好的图片资源默认是存放在输出文件所在的同级目录下，并且名称格式是：h
Webpack中的loader
一路斜阳的专栏
07-02 574
webpack json-loader
webpack 常用的loader
cominglately的博客
06-03 1004
场景 . webpack 只能识别出javascript文件 对于其他的类型的文件可以通过使用loader转成webpack可以处理的 模块 常用的模块 npm install css-loader style-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babe...
webpack中loader作用
04-29
Webpack中的loader用于将不同种类的非JavaScript文件转换为Webpack可处理的模块，以便在打包后的bundle中使用。 例如，当我们在Webpack中引入一个CSS文件时，Webpack默认无法处理它，因为它只能处理JavaScript模块...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值