webpack管理资源(loader操作)
1.加载css
npm install --save-dev style-loader css-loader
webpack.config.js文件中:
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'
+ ]
+ }
+ ]
+ }
};
2.加载picture
npm install --save-dev file-loader
webpack.config.js文件中:
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'
+ ]
+ }
]
}
};
3.加载字体
npm install --save-dev file-loader
webpack.config.js文件中:
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'
]
},
+ {
+ test: /\.(woff|woff2|eot|ttf|otf)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
};
src/style.css文件中:
+ @font-face {
+ font-family: 'MyFont';
+ src: url('./my-font.woff2') format('woff2'),
+ url('./my-font.woff') format('woff');
+ font-weight: 600;
+ font-style: normal;
+ }
.hello {
color: red;
+ font-family: 'MyFont';
background: url('./icon.png');
}
4.加载数据
npm install --save-dev csv-loader xml-loader
webpack.config.js文件中:
+ {
+ test: /\.(csv|tsv)$/,
+ use: [
+ 'csv-loader'
+ ]
+ },
+ {
+ test: /\.xml$/,
+ use: [
+ 'xml-loader'
+ ]
+ }
webpack管理资源(loader操作)的更多相关文章
- webpack管理资源
加载Css webpack并不能处理js以外的静态资源,通过loader来支持他们 npm install --save-dev style-loader css-loader const path ...
- webpack(3)-管理资源
管理资源:(file-loader 和 url-loader 可以接收并加载任何文件,然后将其输出到构建目录) 加载css:style-loader.css-loader 以style的形式插入到he ...
- webpack笔记二 管理资源
webpack笔记二 管理资源 webpack最出色的功能之一就是除了引入JavaScript,还可以通过loader引入任何其它类型的文件. 加载CSS 为了在JavaScript模块中import ...
- 基于EasyUI Treegrid的权限管理资源列表
1. 前言 最近在开发系统权限管理相关的功能,主要包含用户管理,资源管理,角色管理,组类别管理等小的模块.之前的Web开发中也用过jQueryEasyUI插件,感觉这款插件简单易用,上手很快.以前用到 ...
- EC笔记:第三部分:13、以对象管理资源
C++相比Java等含有gc的语言来说,内存管理方面(也包括资源管理)比较令人头疼.一些初级程序员,甚至是一些经验丰富的老程序员,也会经常在资源管理上犯错.这时候就需要一个能够自动管理资源的东西(gc ...
- Effective C++ ----以对象管理资源
以对象管理资源 通过对象的析构函数的自动调用来自动释放资源 第一部分:几种典型的以对象管理资源的例子 1. STL::auto_ptr 获取资源后立刻放入资源管理对象 std::auto_ptr< ...
- [Effective C++ --013]以对象管理资源
这一节基本讲述的是将资源放进管理对象,防止忘记释放资源. 1.一般New和Delete使用场景 void fun() { SimpleClass* pSimpleClass1 = new Simple ...
- 以对象管理资源——C++智能指针auto_ptr简介
auto_ptr是C++标准库提供的类模板,它可以帮助程序员自动管理用new表达式动态分配的单个对象.auto_ptr对象被初始化为指向由new表达式创建的对象,当auto_ptr对象的生命期结束时, ...
- 第十九章——使用资源调控器管理资源(2)——使用T-SQL配置资源调控器
原文:第十九章--使用资源调控器管理资源(2)--使用T-SQL配置资源调控器 前言: 在前一章已经演示了如何使用SSMS来配置资源调控器.但是作为DBA,总有需要写脚本的时候,因为它可以重用及扩展. ...
随机推荐
- JAVA集合框架(一)-综述
目录 什么是java集合框架 使用类型安全的容器 集合框架简图 集合类库主要接口简述 Collection接口方法概览 什么是java集合框架 其实就是java类库提供的一套相当完整的各种数据结构的实 ...
- springaop\ cglib\ AspectJ
元编程 vs 动态代理 vs isa代理 springaop的底层实现有两种,一种是jdk的动态代理,另一种是cglib,springaop没有用到aspectj,只是借鉴了它并添加了aspectj风 ...
- [CrackMe]160个CrackMe之015
吾爱破解专题汇总:[反汇编练习]160个CrackME索引目录1~160建议收藏备用 一.破解 该破解比较简单,其是一个静态密码 2G83G35Hs2 ,输入进去即可破解. 1)栈定位法找到用户代码 ...
- [Spring cloud 一步步实现广告系统] 1. 业务架构分析
什么是广告系统? 主要包含: 广告主投放广告的<广告投放系统> 媒体方(广告展示媒介-)检索广告用的<广告检索系统> 广告计费系统(按次,曝光量等等) 报表系统 Etc. 使用 ...
- Kibana中文汉化支持
Kibana从6.6.0版本开始支持中文 参考:https://github.com/anbai-inc/Kibana_Hanization 汉化方法如下: 以现行最新版本7.2.0为例,测试机器为W ...
- 框架用多了真的会死人的,spring-cloud全家桶与mybitais 集成完整示例(附下载)
题外话: 看到这一长串包含各种技术名词的标题,一路走来感觉研发深深的被各种框架给绑架了,从我们刚出生最简单的jsp,servlet打天下,到spring mvc的盛行,再到现在spring-boo ...
- Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理
这是搭建个人博客系统系列文章的最后一篇,如果你是从第一篇一路跟下来的,那么恭喜你,即将完成整个博客网站的搭建.OK,话不多说,开始我们的收官之战. 不知你想过没有,如果我们的文章少,一眼看完整个目录, ...
- gcc 4.9 编译安装 in Ubuntu 18.04(主要用于在无root权限下,进行更新系统 gcc 版本)
gcc 4.9 编译安装教程,因为项目编译过程中,需要采用特定的gcc版本来进行编译,所以进行简要记录,进行备忘: 下载:curl -O -L https://mirrors.tuna.tsinghu ...
- Python—图形界面开发
https://blog.csdn.net/kun_dl/category_7418837.html https://www.runoob.com/python/python-gui-tkinter. ...
- Mysql—下载安装与使用
一.安装前准备 检查是否已经安装过mysql,执行命令,显示结果为:bt-mysql57-5.7.26-1.el7.x86_64 [root@localhost ~]# rpm -qa | grep ...