【webpack学习笔记】a02-管理资源
在webpack 中,各种资源要引入,要用到module
配置,比如css/图片/字体等等。
例如:
module.exports = {
entry: './src/app.js', //这是入口文件配置
output: {
//这里是出口文件配置
},
module: {
rules: [
//而这里,就是配置各种资源的地方
{
test: /\.(jpg|png|gif)/,
use: ['file-loader']
}
]
}
}
一般需要用的类型也就是 css样式、图片、字体、数据,可以借助一些loader或者插件加载优化这些资源。
加载css
加载css最常用到的是css-loader
和style-loader
,如果需要单独分离出css文件webpack4以前可以用ExtractTextWebpackPlugin
,webpack4则需要换成MiniCssExtractPlugin
插件
css-loader
的作用是解析以.css
结尾的文件,让它在就算是在js中引入也能够使用。官方的说法是:
css-loader 解释(interpret) @import 和 url() ,会 import/require() 后再解析(resolve)它们。
style-loader
是引用资源的loader,它会将css引入到head标签中生成一个<style>
示例流程:
安装:
npm install --save-dev css-loader
npm install --save-dev style-loader
webpack.config.js
module.exports = {
entry: './src/app.js', //这是入口文件配置
output: {
//这里是出口文件配置
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
}
图片&&字体
图片和字体都可以用file-loader
或url-loader
;
file-loader
则是可以url-loader
的用法和file-loader
差不多,准确的说应该它已经包含了file-loader
。它们俩的主要区别就是:url-loader
在文件大小(byte)小于指定限制的时候,可以返回一个DataURL.
【webpack学习笔记】a02-管理资源的更多相关文章
- webpack笔记二 管理资源
webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...
- 更博不能忘——webpack学习笔记
webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- MongoDB学习笔记—权限管理
1.MongoDB权限介绍 a 上篇文章中,我们在Linux下配置了MongoDB环境并且将其设置为服务随机器启动而启动,那么接下来这篇文章我们就来简单说一下MongoDB下对登录用户权限的管理. b ...
- webpack学习笔记(二)-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- CentOS学习笔记--程序管理
程序管理 一个程序被加载到内存当中运行,那么在内存内的那个数据就被称为程序(process).程序是操作系统上非常重要的概念, 所有系统上面跑的数据都会以程序的型态存在.那么系统的程序有哪些状态?不同 ...
随机推荐
- [转载]如何快速下载、安装和配置chromedriver ?
转自:https://jingyan.baidu.com/album/f7ff0bfcdd89ed2e27bb1379.html?picindex=7 下载地址: http://npm.taobao. ...
- Python中的反转字符串问题
按单词反转字符串是一道很常见的面试题.在Python中实现起来非常简单. def reverse_string_by_word(s): lst = s.split() # split by blank ...
- 1、docker容器技术基础入门
Docker和传统虚拟机的区别 参考文章: https://lwn.net/Articles/531114/ 操作中的命名空间详解 https://blog.yadu ...
- IT项目管理十大要素
1.项目需求PgMp.mypm.net 当项目混乱和不可控的时候,往往是源头出了问题,解决源头才能治本.项目管理者联盟文章 软件项目中的范围管理重点就是项目需求,需求包括原始需求,用户需求,产品需求和 ...
- scipy 短时傅里叶变化
原文链接 https://www.cnblogs.com/hoojjack/p/9967298.html 计算短时傅里叶变换(STFT) scipy.signal.stft(x,fs = 1.0, ...
- libc++abi.dylib: terminating with uncaught exception of type NSException (lldb)
In Xcode 9 and Swift 4: Print exception stack to know the reason of the exception: Go to show break ...
- 2>&1的意思
2>&1的意思就是将标准错误也输出到标准输出当中.
- day24
## 复习 1.类对象属性的查找顺序: 先找自身再找类1)类的名称空间:直接写在类中2) 对象的名称空间:写在__init__方法中,通过self.属性形成名称空间中的名字3) 类的方法:在类中用@c ...
- 分布式消息通信Kafka-原理分析
本文目标 TopicPartition 消息分发策略 消息消费原理 消息的存储策略 Partition 副本机制 1 关于 Topic 和 Partition 1.1 Topic 在 kafka 中, ...
- git命令合并分支代码
对于复杂的系统,我们可能要开好几个分支来开发,那么怎样使用git合并分支呢? 合并步骤:1.进入要合并的分支(如开发分支合并到master,则进入master目录)git checkout maste ...