webpack3之loader全解析

首先亮出webpack官方网站，webpack能干什么？官网给出的答案就是，一句话，让一切变得简单！

各式各样的loader层出不穷，让我们在构建时不知所措，于此，总结下loader的全解析。

概念

loader，顾名思义，加载器，英文的解释如下：

Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

中文翻译过来就是：

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或“加载”模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

从中，可以看出loader的强大作用，分析下：

  1. 转换的作用。开发所用到的都转换成网页加载所必备的html+css+js+img等要求格式的文件。
  2. 转换对象是源代码。loader只对源代码转换，至于其他的功能，plugins就来接收它做不到的地方。

总结一句话：loader, 加载的机器，形象的比喻下，就像一个豆浆机，放上你的原料，它就开始认真的工作了！

常用的loader

1、babel-loader

This package allows transpiling JavaScript files using Babel and webpack.

加载 ES2015+ 代码，然后使用 Babel 转译为 ES5

安装：

npm install --save-dev babel-loader babel-core babel-preset-env webpack

使用：

{
 test: /\.js$/,
 exclude: /node_modules/,
 loader: 'babel-loader'
}

2、style-loader

Adds CSS to the DOM by injecting a <style> tag

将模块的导出作为样式添加到 DOM 中

安装：

npm install style-loader --save-dev

建议要与css-loader一起使用

使用：

{
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader'
]
}

3、css-loader

解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码

安装：

npm install css-loader --save-dev

使用：

{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
}

4、less-loader

加载和转译 LESS 文件

安装：

npm install --save-dev less-loader less

使用：

{
 test: /\.less$/,
 exclude: /node_modules/,
 use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
}

5、url-loader

Loads files as base64 encoded URL

处理图片类文件，但如果文件小于限制，可以返回 data URL

安装：

npm install --save-dev url-loader

使用：

{
 test: /\.(jpg|jpeg|png|gif)$/,
 loader: 'url-loader',
 options: {
   limit: 8192
 }
}

6、file-loader

Instructs webpack to emit the required object as file and to return its public URL

处理font/svg等，将文件发送到输出文件夹，并返回（相对）URL

安装：

npm install file-loader --save-dev

使用：

{
 test: /\.(woff|woff2|svg|eot|ttf)$/,
 use: 'file-loader'
}

7、vue-loader

加载和转译 Vue 组件

安装：

npm install --save-dev vue-loader vue vue-template-compiler

使用：

{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
   loaders: {
     less: ExtractTextPlugin.extract({
       use: ['css-loader', 'less-loader'],
       fallback: 'vue-style-loader'
     })
   }
 }
}

至此，有关loader中所用的参数请移步官网查询解决，谢谢查阅！以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • webpack2.0配置postcss-loader的方法

    本文介绍使用webpack2.0配置postcssloader,分享给大家.具体如下: 安装postcss-loader npm install --save-dev postcss-loader 然后配置webpack.config.js { test:/\.css$/, use:[ 'style-loader','css-loader?importLoaders=1','postcss-loader' ] } 一种办法是配置postcss.config.js module.exports =

  • Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件

    Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件

    webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com

  • Webpack中css-loader和less-loader的使用教程

    Webpack中css-loader和less-loader的使用教程

    前言 在Webpack中,通过css-loader,可以实现在js文件中通过require的方式,来引入css.下面来看看详细的介绍吧. 一.css-loader 我们需要在js文件里,通过require的方式来引入css,我们来看具体的方法,首先需要安装css-loader, style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css). npm install css-loader,style-loader --save-dev 然后在main

  • webpack使用 babel-loader 转换 ES6代码示例

    webpack使用 babel-loader 转换 ES6代码示例

    本文介绍了webpack使用 babel-loader 转换 ES6代码示例,分享给大家,具体如下: 查询各个 loader的使用,可以在官网上查询.https://www.npmjs.com (一)安装 babel-loader,babel-core. 使用命令 npm install --save-dev babel-loader babel-core 因为ES6语法每年都在更新,因此,我们需要一定的规则去转换. npm install --save-dev babel-preset-lat

  • Vue + Webpack + Vue-loader学习教程之相关配置篇

    前言 之前已经介绍过了Vue + Webpack + Vue-loader的相关功能介绍,大家可以点击这篇文章了解详情.下面就来看看相关配置篇,感兴趣的可以参考学习. 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码.它会根据 lang 属性自动用适当的加载器去处理. CSS 例如,我们编译用 SASS 编译 <style> 标签: npm install sass-l

  • 详解webpack进阶之loader篇

    webpack的loaders是一大特色,也是很重要的一部分.这遍博客我将分类讲解一些常用的laoder 一.loaders之 预处理 css-loader 处理css中路径引用等问题 style-loader 动态把样式写入css sass-loader scss编译器 less-loader less编译器 postcss-loader scss再处理 npm install --save -dev css-loader style-loader sass-loader less-loade

  • Vue + Webpack + Vue-loader学习教程之功能介绍篇

    Vue + Webpack + Vue-loader学习教程之功能介绍篇

    Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块. vue-loader 提供了一些非常酷炫的特性: ES2015默认可用: 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade. 把 <style> 和 <template> 内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理. 对每个

  • webpack3之loader全解析

    首先亮出webpack官方网站,webpack能干什么?官网给出的答案就是,一句话,让一切变得简单! 各式各样的loader层出不穷,让我们在构建时不知所措,于此,总结下loader的全解析. 概念 loader,顾名思义,加载器,英文的解释如下: Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you impor

  • java agent使用全解析

    今天打算写一下 Java agent,一开始我对它的概念也比较陌生,后来在别人口中听到 字节码插桩,bTrace,Arthas后面才逐渐了解到Java还提供了这么个工具. JVM启动前静态Instrument Java agent 是什么? Java agent是java命令的一个参数.参数 javaagent 可以用于指定一个 jar 包,并且对该 java 包有2个要求: 这个 jar 包的 MANIFEST.MF 文件必须指定 Premain-Class 项. Premain-Class

  • create-react-app项目配置全解析

    目录 引言 准备工作 启动命令 start.js build.js 目录结构 配置解析 weback.config.js 结语 引言 create-react-app(以下简称cra)作为react官方提供的脚手架工具,是目前生成react项目一个非常常用和主流的工具.很多企业级的应用搭建也是基于这个脚手架工具上二次开发.最近这段正好最近学习了webpack打包配置工程化的一些内容,索性就以cra的配置为例,对这段时间的学习做一个总结. 准备工作 首先,我们要用cra创建一个项目.这个没啥好说,

  • MySQL INT类型全解析

    前言: 整型是MySQL中最常用的字段类型之一,通常用于存储整数,其中int是整型中最常用的,对于int类型你是否真正了解呢?本文会带你熟悉int类型相关知识,也会介绍其他整型字段的使用. 1.整型分类及存储范围 整数类型 字节 有符号范围 无符号范围 TINYINT 1 -128 ~ 127 0 ~ 255 SMALLINT 2 -32768 ~ 32767 0 ~ 65535 MEDIUMINT 3 -8388608 ~ 8388607 0 ~ 16777215 INT/INTEGER 4

  • Java 泛型全解析

    泛型简介 什么是泛型? 参化类型,数是JDK1.5的新特性.(定义泛型时使用参数可以简单理解为形参),例如List<E>,Map<K,V> 编译时的一种类型,此类型仅仅在编译阶段有效,运行时无效.例如List<String>在运行时String会被擦除,最终系统会认为都是Object. 为什么要使用泛型? 泛型是进行类型设计或方法定义时的一种约束规范,基于此规范可以: 提高编程时灵活性(有点抽象,后续结合实例理解). 提高程序运行时的性能.(在编译阶段解决一些运行时需要

  • Vue 组件注册全解析

    全局组件注册语法 components中的两个参数组件名称和组件内容 Vue.component(组件名称, { data: 组件数据, template:组件模板内容 }) 全局组件注册应用 组件创建: Vue.component('button-counter', { data: function(){ return { count: 0 } }, template: '<button @click="handle">点击了{{count}}次</button&g

  • MySQL数据类型全解析

    数据类型:定义列中可以存储什么数据以及该数据实际怎样存储的基本规则. 数据类型用于以下目的: 1.允许限制可存储在列中的数据.如:数值数据类型列只能接受数值. 2.允许在内部更有效地存储数据.如:用比文本串更简洁的格式存储数值和日期时间值. 3.允许变换排序顺序.如:数据都作为串处理,则1位于10前,10位于2前(串以字典顺序排序,从左边开始比较,一次一个字符):作为数值数据类型,数值才能正确排序. 一.串数据类型 最常用的数据类型,存储串,如名字.地址.电话号码等. 两种基本的串类型:定长串和

  • Java信号量全解析

    前言: Semaphore(信号量) 是一个线程同步结构,用于在线程间传递信号,以避免出现信号丢失(译者注:下文会具体介绍),或者像锁一样用于保护一个关键区域.自从5.0开始,jdk在java.util.concurrent包里提供了Semaphore 的官方实现,因此大家不需要自己去实现Semaphore.但是还是很有必要去熟悉如何使用Semaphore及其背后的原理 内容主题: 一.简单的Semaphore实现 下面是一个信号量的简单实现: public class Semaphore {

  • C# 单元测试全解析

    目录 1.前言 2.单元测试 2.1 单元测试的定义 2.2 单元测试的好处 2.3 单元测试的原则 3..NET 中的测试框架 3.1 MS Test 3.2 NUnit 3.3 XUnit 4.XUnit 的基本使用 5.其他 1.前言 "不会写单元测试的程序员不是合格的程序员,不写单元测试的程序员不是优秀的工程师." 那么问题来了,什么是单元测试,如何做单元测试. 2.单元测试 2.1 单元测试的定义 按照维基百科上的说法,单元测试(Unit Testing)又称为模块测试, 是

  • C语言自定义类型全解析

    C语言自定义类型全解析

    目录 前言 结构体类型 结构体的声明 结构体变量的定义与初始化 结构体的自引用 结构体的访问 结构体的传参 传结构体 传地址 结构体的内存对齐(强烈建议观看) 位段 位段的声明 位段的内存管理 位段的跨平台性  枚举类型 枚举类型的定义 枚举类型赋予初始值 枚举类型的优点 联合体类型 联合体的定义 联合体的特点  联合体内存大小的计算 前言 初学C语言 我们先接触的都是内置的类型 比如说int char short float double long等等 这一期就来聊一聊自定义类型的知识 结构体

随机推荐