Webpack教程四：Loader

最新推荐文章于 2024-04-25 23:45:26 发布
最新推荐文章于 2024-04-25 23:45:26 发布
阅读量518 收藏 3
点赞数
分类专栏： Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35732147/article/details/90286681
版权

目录

一、什么是Loader

二、打包图片

2.1、file-loader

2.2、url-loader

2.3、file-loader和url-loader的比较

三、打包CSS文件

3.1、style-loader和css-loader

3.2、sass-loader

3.3、postcss-loader

3.4、处理sass文件中引入另外sass文件的情况

3.5、CSS模块化

四、打包字体、图标

一、什么是Loader

    前面章节已经展示了如何使用webpack打包js文件，那么怎么使用webpack打包其他类型的文件呢？（比如图片、css样式文件、json文件等等）

    答案是使用loader，webpack最出色的功能之一就是，除了能引入js文件之外，还可以通过loader引入任何其他类型的文件。

    因此，loader是一个打包方案，能对特定类型的文件用相应的方案进行打包。

二、打包图片

    webpack的loader机制支持打包图片，打包图片主要用到的两个loader是file-loader和url-loader。

2.1、file-loader

    我们先来看file-loader。

    首先，先安装file-loader：

   然后，清空webpack-demo目录下的src文件夹，并随便放入一张图片：

   在src文件夹中再加入一个index.js文件：

   index.js:

import Icon from './dog.jpg';

console.log(Icon);
var element = document.getElementById('webContent');

var icon = new Image();
icon.src = Icon;

element.appendChild(icon);

    然后，为了让file-loader能够起作用，还需配置wepback.config.js文件：

    webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'main.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [
                    'file-loader'                       // 使用的loader
                ]
            }
        ]
    }
}

    最后，进行打包操作：

   打包后生成了一个新的以哈希值命名的图片文件，可以在dist文件夹中找到：

    我们可以使用浏览器打开dist.html：

    图片已经被成功打包，并在项目中显示出效果了！

    另外，还可以对file-loader进行更多配置：

    webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'main.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'file-loader',              // 使用的loader
                    options: {
                        name: '[name].[ext]'            // 打包出的图片文件仍保持原有命名
                    }
                }]
            }
        ]
    }
}

    进行打包操作：

    可以看到生成的图片文件文件名与原始文件一致。

2.2、url-loader

    还可以使用url-loader来打包图片，它与file-loader的不同之处在于url-loader将图片打包成base64的形式加载到main.js文件中。

    首先，让我们来安装url-loader：

    然后，重新配置webpack.config.js：

    webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'main.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            }
        ]
    }
}

    进行打包操作：

    可以明显发现，这次打包没有生成新图片文件，这是因为dog.jpg这个图片文件大小只有8kb，所以url-loader以base64的形式对该图片文件进行打包。

    我们打开main.js文件：

    可以发现，图片真的以base64位的形式被打包，并被加载到main.js文件中。

    可以用浏览器打开dist.html文件：

    效果和之前一致！

2.3、file-loader和url-loader的比较

    file-loader实际上只将图片进行了文件目录的转移，而ulr-loader却可以将图片文件以base64位的形式进行处理，因此：

  • 当图片很小时    ——    适合用url-loader，因为图片将以base64位的形式加载到main.js，因此浏览器将只请求一个main.js文件，而不用多发起一次对图片的http请求。
  • 当图片比较大时    ——    适合用file-loader，因为能让main.js更快地加载出来。

三、打包CSS文件

3.1、style-loader和css-loader

    为了让webpack能够打包css文件，需要安装style-loader和css-loader，并对webpack.config.js进行配置。

    先来安装style-loader和css-loader：

    再对webpack.config.js进行配置：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'main.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

    现在就可以来测试一下webpack能不能打包css文件了，首先在src文件夹下创建一个dog.css文件：

    dog.css:

.dog {
    width: 300px;
    height: 300px;
}

    修改index.js：

    index.js:

import Icon from './dog.jpg';
import './dog.css';

var element = document.getElementById('webContent');

var icon = new Image();
icon.src = Icon;
icon.classList.add('dog');

element.appendChild(icon);

    进行打包：

    用浏览器打开dist.html，可以发现css样式文件已经起作用：

3.2、sass-loader

    webpack不仅可以打包css文件，还可以打包sass文件，不过需要sass-loader。

    首先安装sass-loader：

    再配置webpack.config.js：

    webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'main.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    }
}

    现在可以测试webpack能不能打包sass文件，首先修改dog.css文件名为dog.scss，然后再修改dog.scss内容：

    dog.scss：

body {
    .dog {
        width: 300px;
        height: 300px;
    }
}

    进行打包：

    再用浏览器打开dist.html，可以发现效果与之前一样：

3.3、postcss-loader

    许多css样式的书写需要添加厂商前缀，我们可以使用postcss-loader来完成添加厂商前缀的操作，但现在我们先来看不添加厂商前缀的示例。

    修改dog.scss文件：

    dog.scss:

body {
    .dog {
        width: 300px;
        height: 300px;
        transform: translate(100px, 100px);
    }
}

    进行打包，然后用浏览器打开dist.html：

    果然有偏移效果，在浏览器中查看样式：

    可以发现，transform之前并没有添加前缀，接下来我们使用postcss-loader来让transform之前添加厂商前缀。

    首先，安装postcss-loader:

   因为还需要autoprefixer插件的配合，所以安装autoprefixer：

   然后在webpack-demo根目录创建一个postcss.config.js，并为其添加内容：

    postcss.config.js:

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

    再配置webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'main.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                    'postcss-loader'
                ]
            }
        ]
    }
}

    进行打包：

   用浏览器打开dist.html，可以发现transform已经添加了厂商前缀：

3.4、处理sass文件中引入另外sass文件的情况

    在webpack打包sass文件的过程中，它内部调用的loader的顺序是postcss-loader、sass-loader、css-loader和style-loader，也就是webpack.config.js文件中从use数组中从下往上调用：

    现在，在src根目录创建一个dog2.scss文件：

    dog2.scss:

body {
    .dog {
        transform: translate(100px, 100px);
    }
}

    再修改dog.scss文件：

    dog.scss:

@import './dog2.scss';

body {
    .dog {
        width: 300px;
        height: 300px;
    }
}

    因为dog2.scss作为引入的方式加载到dog.scss，所以webpack会直接调用css-loader，而不会在调用css-loader之前先调用postcss-loader和sass-loader，为了解决这个问题，可以对css-loader进行配置：

    webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'main.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                      loader: 'css-loader',
                      options: {
                          importLoaders: 2
                      }  
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            }
        ]
    }
}

    现在可以进行打包了：

3.5、CSS模块化

    webpack支持CSS模块化，具体是什么意思呢？

    在src根目录下，创建一个createImg.js：

    createImg.js:

import Icon from './dog.jpg';

function createImg() {
    var element = document.getElementById('webContent');

    var icon = new Image();
    icon.src = Icon;
    icon.classList.add('dog');

    element.appendChild(icon);
}

export default createImg;

    修改src目录下的index.js:

    index.js:

import Icon from './dog.jpg';
import './dog.scss';
import createImg from './createImg.js';

createImg();

var element = document.getElementById('webContent');

var icon = new Image();
icon.src = Icon;
icon.classList.add('dog');

element.appendChild(icon);

    进行打包：

    然后用浏览器打开dist.html:

    可以发现，新创建的图片和之前的图片有相同的样式，也就是dog.scss样式文件中指定的效果。

    现在我们想让只有其中的一张图片具有dog.scss文件中的样式，这也就是CSS模块化的意思，只将某个CSS文件作用于页面中的某些部分。

    可以这样来做，首先修改webpack.config.js文件以开启CSS模块化：

    webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'main.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                      loader: 'css-loader',
                      options: {
                          importLoaders: 2,
                          modules: true
                      }  
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            }
        ]
    }
}

    再修改index.js文件：

    index.js:

import Icon from './dog.jpg';
import style from './dog.scss';
import createImg from './createImg.js';

createImg();

var element = document.getElementById('webContent');

var icon = new Image();
icon.src = Icon;
icon.classList.add(style.dog);

element.appendChild(icon);

    进行打包，然后用浏览器打开dist.html文件：

    可以发现，dog.scss文件样式只作用于其中的一张图片。

四、打包字体、图标

    如何使用webpack来打包字体和图标呢？

    我们可以去阿里巴巴矢量图标库下载图标来测试一下。

    这里我随便下载了一个图标：

    在webpack-demo的src文件夹下新建一个fonts文件夹，将iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.woff2这几个文件拷贝进去。

    然后在src文件夹下新建一个iconfont.scss，将iconfont.css里的全部内容复制到iconfont.scss里，并作路径修改：

    iconfont.scss：

    修改index.js:

    index.js:

import './iconfont.scss';

var webContent = document.getElementById('webContent');
webContent.innerHTML = '<i class="iconfont iconWIFI"></i>';

    最后，还要修改webpack.config.js:

    webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'              
    },                
    output: {
        filename: 'main.js',                
        path: path.resolve(__dirname, 'dist')    
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
                use: [{
                    loader: 'url-loader',               // 使用的loader
                    options: {
                        limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                      loader: 'css-loader',
                      options: {
                          importLoaders: 2
                      }  
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

    现在可以进行打包了：

    使用浏览器打开dist.html：

    图标显示出来了！

 

不睡觉的怪叔叔
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是loader? (webpack学习篇4)
Riona_cheng的博客
08-31 2915
webpack中loader的配置
数组逆序
xuyang0905的博客
10-25 3897
来源 计算概论05 描述 将一个数组中的值按逆序重新存放。例如，原来的顺序为8,6,5,4,1。要求改为1,4,5,6,8。 关于输入 输入为两行：第一行数组中元素的个数n（1 < n < 100)，第二行是n个整数，每两个整数之间用空格分隔。 关于输出 输出为一行：输出逆序后数组的整数，每两个整数之间用空格分隔。 例子输入 5 8 6 5 4 1 例子输出 1 4 5 6 8 #include <stdio.h> int main() { int a[100], n, i, t;
跟着官方指南学webpack之loader（037）
weixin_31707323的博客
07-06 263
跟着官方指南学webpack之loader webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 src/index.js，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。 通常你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 webpack.config.js 文件，然后 webpack 会自动使用它。 1.目录结构 2.项目初始化 F:\myVue\webpack-loader>npm init This ut
什么是loader？
热门推荐
张璟冰的博客
04-12 1万+
什么是loader 我们使用webpack 来处理我们写的js代码，并且webpack 会自动处理js之间的相关依赖。 在实际项目中，不仅有js文件，还有css、图片、ES6转ES5、tpyescript转ES5，将less，scss转化css，将jsx、vue文件转换js文件。 使用npm run build打包过程会报错，如下图： You may need an appropriate loa...
(理解)webpack中postcss-loader的
最新发布
小余的前端博客
04-25 531
我们可以将这些配置信息放到一个单独的文件中进行管理：(就不会让上面配置文件里面套太多层了，看着都密密麻麻的)事实上，在配置postcss-loader时，我们配置插件并不需要使用autoprefixer。我们可以使用另外一个插件：postcss-preset-env。注意：我们在使用某些postcss插件时，也可以直接传入字符串。
webpack-loader机制以及模拟实现
LYFlied的博客
03-30 3162
Loader(加载器) 是 webpack 的核心之一。它用于将不同类型的文件转换为 webpack 可识别的模块。 loader和plugin区别 链式调用多个loader 模拟loader实现 模拟一 模拟二
webpack-tut:webpack教程演示
05-07
在“webpack-tut”教程中，你可能会遇到以下几个关键概念： 1. **配置文件**：Webpack 的配置文件通常命名为 `webpack.config.js`，这是一个 JavaScript 对象，定义了 Webpack 如何处理项目中的文件。配置包括入口...
webpack-tutorial:姜瑞涛官方网站的Webpack教程代码
05-07
在姜瑞涛的Webpack教程中，你将学习如何创建基本的Webpack配置，添加和配置加载器，使用插件，以及如何进行模块化开发。这个过程可能会涉及到设置`package.json`文件，安装必要的依赖，以及理解Webpack构建流程。...
Webpack中css-loader和less-loader的使用教程
12-03
在处理CSS和预处理器语言如Less时，Webpack 提供了专门的加载器（loader）来处理这些任务。本文将详细介绍如何在Webpack配置中使用`css-loader`和`less-loader`。 ### 一、css-loader `css-loader`的主要功能是...
webpack-guide：Webpack指南
02-09
在"webpack-guide-master"这个压缩包中，很可能是包含了关于学习和实践 Webpack 的教程资源。可能包括配置示例、项目结构、讲解文档等内容。通过学习这些资料，你可以深入理解 Webpack 的工作原理，掌握如何配置和...
webpack系列之：手把手教你 打包和使用js文件
11-16
本教程将详细解释如何使用Webpack来打包和使用JavaScript文件，以便在实际项目中高效管理代码。 首先，让我们了解Webpack的基本概念： 1. **入口（Entry）**：Webpack的起点，它告诉Webpack从哪个文件开始构建模块...
Webpack4教程 - 第二部分，使用loader处理scss,图片以及转换JS
weixin_33691700的博客
09-12 190
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概念之后，是时候更深入一点了。这次我们会涉及Webpack中非常强大的一个东西:loader。首先，我们会学习如何使用那些可用的loader。它将包括如何处理css、scss、...
Webpack核心loader (三）—— 使用第三方库
小苹果的成长笔记
08-26 214
1.入口文件引入 ：只要引入都会被打包 cnpm i jquey -S index.js import $ from 'jquey'; $('ul li:last-child').css('background','pink') 2.Webpack.ProvidePlugin引入 //建议使用这种 自动加载模块，而不必用import或require 如果加载...
如何使用webpack打包html+css+js+img+font?
ai6319的博客
07-03 432
如何使用webpack打包html+css+js+img+font? 工作中需要打包单个小项目带着疑问去试试。 1.创建一个空文件夹，如下图 2.使用命令行npm init -y 创建一个默认的package.json 如需修改可自己打开修改 3.webpack 打包要先安装webpack 和webpack-cli 这里依然使用命令行进行安装，推荐单项目安装，可使用淘宝镜像，...
loader配置
sxLDWX的专栏
12-29 1337
当一种文件中需要使用多个loader时，使用 ！来连接多个loader。如下CSS-loader中所示。babel-loader常用配置：​module: { ​ loaders: [ ​ { ​test: /\.jsx?$/, ​exclude: /node_modules/, ​loader: 'babel
webpack loader从入门到精通全解析
小青蛙的博客
07-19 1870
webpack loader从入门到精通 Loader 就像是一个转换器，可以把源文件经过转化后输出新的一个结果，并且一个文件还可以链式的经过多个转换器转换。 以转换处理 SCSS 文件为例子： SCSS 源代码会先移交给 sass-loader 把 SCSS 转换成 CSS； 把 sass-loader 输出的 CSS 交给css-loader 处理，找出 CSS 中依赖的资源、压缩 CSS...
webpack中loader加载器的使用及原理(常用的loader加载器)
songshuguowang的专栏
12-26 4113
webpack的loaders是一块很重要的组成部分。我们都知道webpack是用于资源打包的，里面的所有资源都是“模块”，内部实现了对模块资源进行加载的机制。但是Webpack本身只能处理 js模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。  Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果，例如可以使用loader加载器可...
webpack loader和plugin编写
weixin_34239592的博客
10-11 530
1 基础回顾 首先我们先回顾一下webpack常见配置，因为后面会用到，所以简单介绍一下。 1.1 webpack常见配置 // 入口文件 entry: { app: './src/js/index.js', }, // 输出文件 output: { filename: '[name].bundle.js', path: path.resolve(__dir...
深入分析Java ClassLoader原理
weixin_30407613的博客
02-25 979
一、什么是ClassLoader? 大家都知道，当我们写好一个Java程序之后，不是管是CS还是BS应用，都是由若干个.class文件组织而成的一个完整的Java应用程序，当程序在运行时，即会调用该程序的一个入口函数来调用系统的相关功能，而这些功能都被封装在不同的class文件当中，所以经常要从这个class文件中要调用另外一个class文件中的方法，如果另外一个文件不...
Webpack 入门教程：模块打包与优化指南
Webpack 支持多种模块规范，如 CommonJS、AMD、ES6 模块，以及处理 CSS、图片、JSON 等不同类型的资源，通过 Loader 转换机制实现模块化。 ### 安装 要开始使用 Webpack，首先需要在项目中安装它。如果项目已有一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值