在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. git push时报错:Updates were rejected because the tip of your current branch is behind

    出现这样的问题是由于:自己当前版本低于远程仓库版本 有如下几种解决方法: 1.使用强制push的方法: git push -u origin master -f 这样会使远程修改丢失,一般是不可取的, ...

  2. 20165306 Exp2 后门原理与实践

    20165306 Exp2 后门原理与实践 实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启动 (3)使用MSF mete ...

  3. Matplotlib.pyplot 把画图保存为图片

    在plt.show()之前执行plt.savefig()函数即可. 简单例子: import matplotlib.pyplot as plt x=[1,2,3,4,5] y=[10,5,15,10, ...

  4. 从svn到git开发转变

    前言:目前的公司的开发技术还是处于刀耕火种的年代,react,vue已经火到不行了,可是还在用jQuery一遍遍处理着dom.版本控制用的是svn,这里也不是说svn不好,在windows下svn的“ ...

  5. 代码生成器——实现生成pojo,sql,mapper接口

    代码生成器(记录一次兴趣代码,多多指教.转载请标明作者) 在我们开始实现代码生成器之前我们先来对代码生成器有一个简单的了解. 1.什么是代码生成器? 故名思义,也就是生成代码的一个程序.那它是一个什么 ...

  6. 根据不同浏览器判断OCX插件是否安装

    最近项目进入到了验收阶段,需要兼容不同的浏览器,海康的Demo写了一个判断插件是否成功安装的函数,但是经过测试,只在IE浏览器下有效果,在其他的浏览器下面会出现Bug,现在需要写一个通用的方法,在不同 ...

  7. java @FunctionalInterface

    public class Worker { private String doWork(String job) { return "Job " + job + " don ...

  8. 牛客 黑龙江大学程序设计竞赛重现 19-4-25 D

    题意: n项工作 1~n  工时s[i] ~e[i], 工时有覆盖的工作不能被同一台机器同时操作, 问完成所有工作的最少机器数 思路:前缀差分和 e.g. a            2 3 4    ...

  9. printf打印输出

    int PrintVal = 9;    /*按整型输出,默认右对齐*/    printf("%d\n",PrintVal);    /*按整型输出,补齐4位的宽度,补齐位为空格 ...

  10. Altium Designer添加元件库文件

    1 默认元件库路径 C:\Users\Public\Documents\Altium\AD 10.0.0.20340\Library 2 创建元件原理图库 图2.1 新建schlib 图2.2 绘制元 ...