如何在webpack中使用loader
一、什么是loader
loader 用于对模块的源代码进行转换。loader 可以使你在 import
或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import
CSS文件!
二、怎么使用loader
示例:加载一个less-loader
1、首先使用npm命令安装less-loader
npm install --save-dev css-loader
2、loader使用
loader有三种方式可以引入到你的程序中
(1)Configuration(配置方式):推荐使用配置方式,在你的webpack.config.js 中配置进去
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
(2)inline(内联方式引入):通过使用import方式引入
import Styles from 'style-loader!less-loader?modules!./styles.less';
(3)cli(命令行方式引入):可以使用命令的形式引入(不推荐,太麻烦)
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
三、loaders的分类(具体用法请参考官网https://doc.webpack-china.org/loaders)
文件
raw-loader
加载文件原始内容(utf-8)val-loader
将代码作为模块执行,并将 exports 转为 JS 代码url-loader
像 file loader 一样工作,但如果文件小于限制,可以返回 data URLfile-loader
将文件发送到输出文件夹,并返回(相对)URL
JSON
json-loader
加载 JSON 文件(默认包含)json5-loader
加载和转译 JSON 5 文件cson-loader
加载和转译 CSON 文件
转换编译(Transpiling)
script-loader
在全局上下文中执行一次 JavaScript 文件(如在 script 标签),不需要解析babel-loader
加载 ES2015+ 代码,然后使用 Babel 转译为 ES5buble-loader
使用 Bublé 加载 ES2015+ 代码,并且将代码转译为 ES5traceur-loader
加载 ES2015+ 代码,然后使用 Traceur 转译为 ES5ts-loader
或awesome-typescript-loader
像 JavaScript 一样加载 TypeScript 2.0+coffee-loader
像 JavaScript 一样加载 CoffeeScript
模板(Templating)
html-loader
导出 HTML 为字符串,需要引用静态资源pug-loader
加载 Pug 模板并返回一个函数jade-loader
加载 Jade 模板并返回一个函数markdown-loader
将 Markdown 转译为 HTMLreact-markdown-loader
使用 markdown-parse parser(解析器) 将 Markdown 编译为 React 组件posthtml-loader
使用 PostHTML 加载并转换 HTML 文件handlebars-loader
将 Handlebars 转移为 HTMLmarkup-inline-loader
将内联的 SVG/MathML 文件转换为 HTML。在应用于图标字体,或将 CSS 动画应用于 SVG 时非常有用。
样式
style-loader
将模块的导出作为样式添加到 DOM 中css-loader
解析 CSS 文件后,使用 import 加载,并且返回 CSS 代码less-loader
加载和转译 LESS 文件sass-loader
加载和转译 SASS/SCSS 文件postcss-loader
使用 PostCSS 加载和转译 CSS/SSS 文件stylus-loader
加载和转译 Stylus 文件
清理和测试(Linting && Testing)
mocha-loader
使用 mocha 测试(浏览器/NodeJS)eslint-loader
PreLoader,使用 ESLint 清理代码jshint-loader
PreLoader,使用 JSHint 清理代码jscs-loader
PreLoader,使用 JSCS 检查代码样式coverjs-loader
PreLoader,使用 CoverJS 确定测试覆盖率
框架(Frameworks)
vue-loader
加载和转译 Vue 组件polymer-loader
使用选择预处理器(preprocessor)处理,并且require()
类似一等模块(first-class)的 Web 组件angular2-template-loader
加载和转译 Angular 组件
如何在webpack中使用loader的更多相关文章
- 如何在webpack中成功引用到图片?
打包图片时,你可曾遇到在产出目录文件夹找不到图片,即便找到了,但是页面说引用不到资源?页面上或者文件中引用的图片地址不对? 一.在webpack中引入图片需要url-loader //webpack配 ...
- Webpack的详细配置,[Webpack中各种loader的安装配置]
在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...
- 第五十一篇:webpack中的loader(二) --less-loader
好家伙 先扩充一下知识点: 什么是.less文件? 作为一名前端开发的同学,很多时候我们都无法避免地要去写大量的 CSS 代码, 而且耗费的时间还不少,所以学习一种能够提升开发效率的 CSS 预处理器 ...
- 第五十篇: webpack中的loader(一) --css-loader
好家伙, 1.webpack配置中devServer节点的常用配置项 devServer:{ //首次打包完成后,自动打开浏览器 open:ture, //在http协议中,如果端口号是80,则可以被 ...
- webpack 中,loader、plugin 的区别
loader 和 plugin 的主要区别: loader 用于加载某些资源文件. 因为 webpack 只能理解 JavaScript 和 JSON 文件,对于其他资源例如 css,图片,或者其他的 ...
- 在webpack中使用postcss之插件包precss
precss是一个预处理css的插件包,集成了很多postcss插件的功能,比如嵌套,变量,继承,混合,循环,判断.下面来介绍如何在webpack中使用precss.一.新建项目1.新建package ...
- Webpack 2 视频教程 014 - 深入理解 Webpack 2 中的 loader
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- (23/24) webpack实战技巧:如何在webpack环境中使用Json
在webpack1或者webpack2版本中,若想在webpack环境中加载Json文件,则需要加载一个json-loader的loader进来的.但是在webpack3.x版本中,则不需要在另外引入 ...
- 如何在webpack开发中利用vue框架使用ES6中提供的新语法
在webpack中开发,会遇到一大推问题,特别是babel6升级到babel7,要跟新一大推插件,而对于安装babel的功能就是在webpack开发中,vue中能够是用ES6的新特性: 例如ES6中的 ...
随机推荐
- POJ1149PIGS
传送门 貌似是最大流建图优化入门题(可惜我还是不会) 最暴力的建图当然是源点连每个猪圈然后猪圈需要拆成n个点分给每个人这个必定是跑不过的 所以我们可以进行优化 很明显没有被动过的猪圈一直是不变的可以不 ...
- 【leetcode】1006. Clumsy Factorial
题目如下: Normally, the factorial of a positive integer n is the product of all positive integers less t ...
- 【leetcode】421. Maximum XOR of Two Numbers in an Array
题目如下: 解题思路:本题的难点在于O(n)的复杂度.为了减少比较的次数,我们可以采用字典树保存输入数组中所有元素的二进制的字符串.接下来就是找出每个元素的异或的最大值,把需要找最大值的元素转成二进制 ...
- QTcpSocket发送结构体
我需要发送的结构体 struct NetDataHeader_t { int nDataType; int nDataSize; }; struct NetDataBase_t { NetDataHe ...
- 10个优秀的 Web UI库/框架
UI(User Interface)即用户界面,也称人机界面.是指用户和某些系统进行交互方法的集合,实现信息的内部形式与人类可以接受形式之间的转换.本文为WUI用户整理了10个优秀的 Web UI 库 ...
- mysql left join 用法说明
left join中关于where和on条件的几个知识点: 1.多表left join是会生成一张临时表,并返回给用户 2.where条件是针对最后生成的这张临时表进行过滤,过滤掉不符合where条件 ...
- linux 日志文件查看
记录下日志中常用的日志查看命令. 1. tail -n 10 -f **.log 显示日志文件尾部10行日志,当有新日志产生,会追加显示. 2. tail 命令 现ff.sh中有如下信息: [ro ...
- 用 Flask 来写个轻博客 (16) — MV(C)_Flask Blueprint 蓝图
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Blueprint 蓝图 定义一个蓝图 注册一个蓝图 创建蓝 ...
- %matplotlib inline 被注释掉后,pycharm不能生成图
目录 问题描述 解决方案 @ 问题描述 在 jupyter 编译器中 程序的开头,有这么一行 %matplotlib inline import numpy as np import matplotl ...
- CentOS 7 64位虚拟机安装过程
第一步:新建一个虚拟机,选择典型安装,点击下一步.