在webpack 中,各种资源要引入,要用到module配置,比如css/图片/字体等等。

例如:

module.exports = {
entry: './src/app.js', //这是入口文件配置
output: {
//这里是出口文件配置
},
module: {
rules: [
//而这里,就是配置各种资源的地方
{
test: /\.(jpg|png|gif)/,
use: ['file-loader']
}
]
}
}

一般需要用的类型也就是 css样式、图片、字体、数据,可以借助一些loader或者插件加载优化这些资源。

加载css

加载css最常用到的是css-loaderstyle-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-loaderurl-loader;

  • file-loader则是可以
  • url-loader的用法和file-loader差不多,准确的说应该它已经包含了file-loader。它们俩的主要区别就是:url-loader在文件大小(byte)小于指定限制的时候,可以返回一个DataURL.

【webpack学习笔记】a02-管理资源的更多相关文章

  1. webpack笔记二 管理资源

    webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...

  2. 更博不能忘——webpack学习笔记

    webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...

  3. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  4. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  5. MongoDB学习笔记—权限管理

    1.MongoDB权限介绍 a 上篇文章中,我们在Linux下配置了MongoDB环境并且将其设置为服务随机器启动而启动,那么接下来这篇文章我们就来简单说一下MongoDB下对登录用户权限的管理. b ...

  6. webpack学习笔记(二)-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  7. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  8. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  9. CentOS学习笔记--程序管理

    程序管理 一个程序被加载到内存当中运行,那么在内存内的那个数据就被称为程序(process).程序是操作系统上非常重要的概念, 所有系统上面跑的数据都会以程序的型态存在.那么系统的程序有哪些状态?不同 ...

随机推荐

  1. [转载]如何快速下载、安装和配置chromedriver ?

    转自:https://jingyan.baidu.com/album/f7ff0bfcdd89ed2e27bb1379.html?picindex=7 下载地址: http://npm.taobao. ...

  2. Python中的反转字符串问题

    按单词反转字符串是一道很常见的面试题.在Python中实现起来非常简单. def reverse_string_by_word(s): lst = s.split() # split by blank ...

  3. 1、docker容器技术基础入门

    Docker和传统虚拟机的区别               参考文章: https://lwn.net/Articles/531114/    操作中的命名空间详解 https://blog.yadu ...

  4. IT项目管理十大要素

    1.项目需求PgMp.mypm.net 当项目混乱和不可控的时候,往往是源头出了问题,解决源头才能治本.项目管理者联盟文章 软件项目中的范围管理重点就是项目需求,需求包括原始需求,用户需求,产品需求和 ...

  5. scipy 短时傅里叶变化

    原文链接   https://www.cnblogs.com/hoojjack/p/9967298.html 计算短时傅里叶变换(STFT) scipy.signal.stft(x,fs = 1.0, ...

  6. 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 ...

  7. 2>&1的意思

    2>&1的意思就是将标准错误也输出到标准输出当中.

  8. day24

    ## 复习 1.类对象属性的查找顺序: 先找自身再找类1)类的名称空间:直接写在类中2) 对象的名称空间:写在__init__方法中,通过self.属性形成名称空间中的名字3) 类的方法:在类中用@c ...

  9. 分布式消息通信Kafka-原理分析

    本文目标 TopicPartition 消息分发策略 消息消费原理 消息的存储策略 Partition 副本机制 1 关于 Topic 和 Partition 1.1 Topic 在 kafka 中, ...

  10. git命令合并分支代码

    对于复杂的系统,我们可能要开好几个分支来开发,那么怎样使用git合并分支呢? 合并步骤:1.进入要合并的分支(如开发分支合并到master,则进入master目录)git checkout maste ...