4.WebPack-Loader
一.什么是Loader
WebPack默认只“认识”以*.js结尾的文件,如果想处理其他类型的文件,就必须添加Loader,有各种各样的Loader,每个Loader可处理不同类型的文件,每当用WebPack打包时遇到不认识的文件(通过后缀名辨别),如果添加了相应的Loader,就会调用指定的Loader去处理,处理完之后,如果没有后继的Loader去处理这类文件,就会返回给调用端,也就是WebPack,WebPack继续处理,直到处理完成。
二.各种各样的Loader
1.style-loader和css-loader
我们在./src/目录下新建一个index.css文件
body{
background-color: red;
}
然后在index.js文件中添加如下操作
import "./index.css"
执行
npm run build
会产生以下输出结果
ERROR in ./src/index.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> body{
| background-color: #ddd;
| }
@ ./src/index.js 1:0-20
我们安装css-loader和style-loader
在webpack.config.js配置文件中添加Loader
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /.css$/, //匹配规则,匹配就使用一下Loader去处理
use: [ "style-loader","css-loader",] //这里要注意顺序,Loader加载顺序规定为从右到左
}
]
}
};
注意,css-loader负责读取css文件以及解释import和require()语句,style-loader负责产生<style></style>标记并把样式字符串插入到该标记中。
我们再次打包
npm run build
然后运行可以发现页面背景变红了
可以看到插入了一个style标签。
2.file-loader
安装
npm install file-loader –save-dev
添加图片资源
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /.css$/,
use: [ "style-loader","css-loader",]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [ "file-loader"]
}
]
}
};
在index.css文件中添加如下代码
body{
background-color: red;
background-image: url(./yasuo.jpg);
}
由于产生的文件是一个相对路径(相对于输出目录),所以把index.html放到./dist目录下,并修改bundle.js引用的路径,运行
npm run build
效果如下:
运行页面
添加其他资源也是如此。
4.WebPack-Loader的更多相关文章
- 怎样写一个webpack loader
div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...
- 如何开发webpack loader
关于webpack 作为近段时间风头正盛的打包工具,webpack基本占领了前端圈.相信你都不好意思说不知道webpack. 有兴趣的同学可以参考下我很早之前的webpack简介 . 确实webpac ...
- 手把手教你撸一个 Webpack Loader
文:小 boy(沪江网校Web前端工程师) 本文原创,转载请注明作者及出处 经常逛 webpack 官网的同学应该会很眼熟上面的图.正如它宣传的一样,webpack 能把左侧各种类型的文件(webpa ...
- 案例实战之如何写一个webpack loader
通过以下几个实例掌握webpack loader的写法 1.写一个多语言替换的loader 在index.js在页面上插入了一个{{title}}文本,我们需要在打包的时候将其替换成对应的多语言 fu ...
- 发布一个npm包(webpack loader)
发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转. 初始化项目 mkdir reverse-color-loader cd ./reverse- ...
- webpack loader & pulgin
webpack loader & plugin https://webpack.js.org/concepts/loaders/ https://webpack.js.org/concepts ...
- webpack loader加载器
配置loader,通过加载器处理文件,例如css sass less等,告诉webpack每一种文件都需要使用什么来加载器来处理. 1.node.js安装好之后也会自动默认安装好npm,所以cmd c ...
- [webpack]——loader配置
前言 当我们需要配置 loader 时,都是在 module.rules 中添加新的配置项,在该字段中,每一项被视为一条匹配使用 loader 的规则. 看一下基础实例: module.exports ...
- 使用webpack loader加载器
了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的 ...
- webpack loader 生成虚拟文件的方案
此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言 使用 webpack 的时候,难免需要写一些 loader,接着就会遇到一个很纠结的问题.该 loade ...
随机推荐
- JVM调优总结(七)-调优方法
JVM调优工具 Jconsole,jProfile,VisualVM Jconsole : jdk自带,功能简单,但是可以在系统有一定负荷的情况下使用.对垃圾回收算法有很详细的跟踪.详细说明参考这里 ...
- Weblogic 漏洞利用总结
整理的一些利用方式,后续会更新到15年至今的洞 后台爆破拿shell 后台爆破: 部署-安装-上载文件 制作war包,一直下一步,最好保存 jar -cvf shell.war ./shll/* 上传 ...
- 以太坊智能合约开发框架Truffle
前言 部署智能合约有多种方式,命令行的浏览器的渠道都有,但往往跟我们程序员的风格不太相符,因为我们习惯了在IDE里写了代码然后打包运行看效果. 虽然现在IDE中已经存在了Solidity插件,可以编写 ...
- Alpha冲刺 —— 5.4
这个作业属于哪个课程 软件工程 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 Alpha冲刺 作业正文 正文 github链接 项目地址 其他参考文献 无 一.会议内容 1.展 ...
- Mysql查询语句,select,inner/left/right join on,group by.....[例题及答案]
创建如下表格,命名为stu_info, course_i, score_table. 题目: 有如图所示的三张表结构,学生信息表(stu_info),课程信息表(course_i),分数信息表(sco ...
- cmd启动mysql,服务名无效
通过cmd无法启动mysql 解决办法: 在计算机管理(或者win+R,输入services.msc)中打开服务,查看mysql服务的名称是否正确. 键入正确的名称启动mysql.
- 高性能可扩展mysql 笔记(四)项目分区表演示
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 登录日志的分区 如何为Customer_login_log表分区? 从以下两个业务场景入手: 用户每次登 ...
- Java实现 LeetCode 430 扁平化多级双向链表
430. 扁平化多级双向链表 您将获得一个双向链表,除了下一个和前一个指针之外,它还有一个子指针,可能指向单独的双向链表.这些子列表可能有一个或多个自己的子项,依此类推,生成多级数据结构,如下面的示例 ...
- java实现迷宫问题
迷宫问题 对于走迷宫,人们提出过很多计算机上的解法.深度优先搜索.广度优先搜索是使用最广的方法.生活中,人们更 愿意使用"紧贴墙壁,靠右行走"的简单规则. 58 下面的代码则采用了 ...
- kvm的命令简单使用
virsh命令常用参数总结 参数 参数说明 基础操作 list 查看虚拟机列表,列出域 start 启动虚拟机,开始一个(以前定义的)非活跃的域 shutdown 关闭虚拟机,关闭一个域 dest ...