webpack--第三方loader
1、配置处理css样式表的第三方loader
webpack默认只能打包处理js类型的文件,无法处理非js类型的文件;要想处理*.css文件,需要手动安装一下合适的第三方loader加载器:
npm i style-loader css-loader -D
修改webpack.config.js
var path = require('path'); // 通过node的模块操作,向外暴露一个配置对象
module.exports = {
entry: path.join(__dirname, './src/main.js'), // 入口,表示要使用webpack打包哪个文件
output: { // 出口
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
module: { // 用于配置所有第三方模块加载器
rules: [ // 所有第三方模块的匹配规则
{
test:/\.css$/,
use: ['style-loader','css-loader']
}
]
}
};
然后,可以在main.js导入.css文件,main.js内容:
// 这是项目的入口js文件 // 导入jquery
//这是ES6中导入模块的语法
import $ from 'jquery'; import './css/common.css'; $(function() {
$('li:odd').css('backgroundColor','yellow');
$('li:even').css('backgroundColor','#eee');
});
common.css内容:
.blue {
background-color: blue;
}
然后,执行webpack命令,重新生成bundle.js。
2、webpack中url-loader的使用:处理css文件中引入的url地址
安装第三方loader加载器:
npm i url-loader file-loader -D
修改webpack.config.js
var path = require('path'); // 通过node的模块操作,向外暴露一个配置对象
module.exports = {
entry: path.join(__dirname, './src/main.js'), // 入口,表示要使用webpack打包哪个文件
output: { // 出口
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
module: { //用于配置所有第三方模块加载器
rules: [ //所有第三方模块的匹配规则
{
test:/\.css$/,
use: ['style-loader','css-loader']
},
{
test:/\.(jpg|png|gif|bmp|jpeg)$/,
use: ['url-loader']
// limit单位byte,如果图片大于等于limit给定值,则不会被转为base64格式字符串
// name=[name].[ext]:打包的图片原名相同
// use: ['url-loader?limit=1000&name=[name].[ext]']
}
]
}
};
common.css内容:
.blue {
background-color: blue;
} div.img {
width: 200px;
height: 200px;
background: url('../images/a.jpg');
background-size: cover;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<script type="text/javascript" src="../dist/bundle.js"></script>
</head>
<body>
<h3 class="blue">h3标签内的文本</h3>
<ul>
<li>这是一个li标签</li>
<li>这是一个li标签</li>
<li>这是一个li标签</li>
<li>这是一个li标签</li>
<li>这是一个li标签</li>
</ul> <div class="img"></div>
</body>
</html>
webpack--第三方loader的更多相关文章
- Vue学习之webpack调用第三方loader(十五)
---恢复内容开始--- 一.webpack 默认只能打包处理 JS 类型的文件,无法处理 其他的非 JS 类型的文件: 如果非要处理 非 JS 类型的文件,我们需要手动安装一些 合适 第三方 lo ...
- 9 loader - 分析webpack调用第三方loader的过程
注意:webpack处理第三方文件类型的过程: 1.发现这个要处理的文件不是JS文件,然后就去配置文件中,查找有没有对应的第三方loader规则 2.如果能找到对应的规则,就会调用对应的loader处 ...
- (4)webpack中配置css,scss,less第三方loader
为什么要使用第三方loader 一般引入样式文件,我们会在html中引入样式标签. 很明显,这样就跟之前在script中引入js文件一样,会导致二次请求.我们希望webpack像处理js文件一样处理样 ...
- 8 loader - 配置处理css样式表的第三方loader
// 使用import语法,导入css样式表 import './css/index.css' // 注意:webpack,默认只能打包处理JS类型的文件,无法处理其它的非JS类型的文件: // 如果 ...
- webpack之loader实践
初识前端模板概念的开发者,通常都使用过underscore的template方法,非常简单好用,支持赋值,条件判断,循环等,基本可以满足我们的需求. 在使用Webpack搭建开发环境的时候,如果要使用 ...
- webpack之loader和plugin简介
webpack之loader和plugin简介 webpack入门和实战(二):全面理解和运用loader和plugins webpack入门(四)——webpack loader 和plugin w ...
- webpack之Loader
我们知道webpack的优点之一就是专注于处理模块化的项目,能做到开箱即用,但同时这也是webpack的缺点,只能用于模块化开发的项目,例如:Vue,React,Angular.Webpack在进行打 ...
- webpack的loader和plugin的区别
[Loader]:用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在buld中引入这些依赖.loader可以将文件从不同的语言(如TypeScript)转 ...
- 第五十六篇:webpack的loader(四) -打包js中的高级语法
好家伙, 1.打包处理js文件中的高级语法 webpack只能打包处理一部分高级的JavaScript 语法.对于那些webpack无法处理的高级js 语法,需要借 助于 babel-loader 进 ...
- 第五十二篇:webpack的loader(三) -url-loader (图片的loader)
好家伙, 1.什么是base64? 图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要 ...
随机推荐
- USACO4.3 Letter Game【枚举·细节】
题意 这道题的题目描述让我好一阵蒙,简述一下题意吧: 给定一些字母的价值(如图所示),给出一个字符串(长度在$3$到$7$之间,可以出现重复的字母)和一个单词库.定义一个单词的价值就是它的字母的价值之 ...
- 【VS开发】【图像处理】RGB各种格式
RGB格式 RGB组合格式 名字 RGB组合格式 描述 此格式用来匹配PC图形帧缓存.每个像素占据8,16,24或32个位,他们都是组合像素格式,其意为在内存中所有像素数据都是相邻排列的.当使用这些格 ...
- java读取文件完整版
public static void readFileByBytes(String fileName) { File file = new File(fileName); InputStream in ...
- Mysql数据库表结构设计准则
一:动静分离 解释:最好做好静态表和动态表的分离.这里解释一下静态表和动态表的含义,静态表:存储着一些固定不变的资源,比如城市/地区名/国家(静态表一定要使用缓存).动态表:一些频繁修改的表 二:关于 ...
- Hive Error : Java heap space 解决方案
Java heap space问题一般解决方案: 设置 set io.sort.mb=10; 排序所使用的内存数量,默认值是100M,和mapred.child.java.opts相对应,opts默认 ...
- 洛谷 P3388 【模板】割点(割顶)(Tarjan)
题目链接 https://www.luogu.org/problemnew/show/P3388 模板题 解题思路 什么是割点? 怎样求割点? dfn :即时间戳,一张图的dfs序(dfs遍历时出现的 ...
- pyhton自动化项目编码以及命名规范
对于任何一个编程项目来说,都需要一个编码的规范以及标准,这里整理了一些Google python的命名规范以及python语言PEP8的编码规范. 一.命名规范 命名示例: module_name, ...
- python,pycharm环境安装
1.1 python3安装四部曲 第一步下载 地址 https://www.python.org/downloads/windows/ 第二步安装 1. 第三步 配置坏境变量 第四步 测试是否完成安装 ...
- python——列表方法
L.append():追加一个元素到列表末尾 L = [] L.append('boy') L.insert() :将一个元素插入到指定位置 L.insert(1, 'girl') L.extend( ...
- Spring Cloud 入门概括介绍
出处: 拜托!面试请不要再问我Spring Cloud底层原理 概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留在对Spring ...