webpack快速入门(三):资源管理
上一章说了基本的webpack是用,包括命令行打包,npm脚本打包等基础的东西。
这篇说一下webpack的资源管理,包括(图片,字体,数据),首先调整一下项目结构成:
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules
没有的文件自行新建一个,那个node_modules是自动生成的,这个可不要手工新建
使用webpack加载css文件:
为了在js模块中加载css,我们首先需要安装两个模块:
npm install --save-dev style-loader css-loader
在webpack-demo目录执行上述命令,会安装style-loader和css-loader模块
一个用来加载css文件,一个用来在页面head中插入内嵌样式。
修改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'
]
}
]
}
}
相比上一篇的配置,增加了module配置,简要说明一下。
rules定义规则,test是一个正则。此处的正则表示匹配以.css结尾的文件
use指定使用的loader,loader就是加载器了,你要在webpack中管理各种资源,包括css
就必须有相对应的资源加载器。此处的loader指定了两个加载器,我们之前已经用命令安装到本地了
接着在src目录新建一个style.css文件,文件内容如下:
.hello {
color: red;
}
不多说,这个不会看不懂吧。。。
修改src目录下的index.js文件,导入我们的css,内容如下:
import _ from 'lodash';
import './style.css'; function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
return element;
}
document.body.appendChild(component());
相比之前的js文件,这里增加了两行内容:
import语句用来导入我们写的css样式,element.classList.add用来给元素添加样式
修改完成。保存文件,执行如下命令:
npm run build
然后在浏览器中打开index.html,看看div中的字体是不是变成了红色。这说明我们的样式生效了。
使用webpack加载图片:
接着再来看看webpack如何加载图片资源,首先修改webpack.config.js,在rules组里添加如下内容:
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
正则用来匹配图片文件名后缀,加载图片使用file-loader
当然,我们要使用file-loader,肯定要先安装,所以修改完了别忘了控制台执行:
npm install --save-dev file-loader
接着在src目录添加一张图片,图片后缀要和正则的能匹配上。。。随便放什么,随你喜欢就好
再修改src目录的index.js文件,修改后的内容如下:
import _ from 'lodash';
import './style.css';
import Icon from './icon.png'; function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
return element;
}
document.body.appendChild(component());
在这里导入了图片,并创建了image对象加入到页面中。
再来修改一下src目录下的style.css文件,修改后的内容如下:
.hello {
color: red;
background: url('./icon.png');
}
再次执行命令:
npm run build
打包完成后打开html文件,应该可以看到div的背景图片了。
官网关于资源管理的介绍中还说了字体和xml数据的示例,个人觉得如果你不做
富文本编辑器需要自带字体的前端需求并不多,所以不做介绍了
而且使用上来说和加载图片基本差不多。有需要的看下官网介绍吧
webpack快速入门(三):资源管理的更多相关文章
- webpack 快速入门 系列 —— 性能
其他章节请看: webpack 快速入门 系列 性能 本篇主要介绍 webpack 中的一些常用性能,包括热模块替换.source map.oneOf.缓存.tree shaking.代码分割.懒加载 ...
- webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包
随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...
- webpack快速入门——CSS进阶:自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- webpack快速入门——如何安装webpack及注意事项
1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...
- webpack快速入门——webpack3.X 快速上手一个Demo
1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...
- webpack快速入门——配置文件:入口和出口,多入口、多出口配置
1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...
- webpack快速入门——配置文件:服务和热更新
1.在终端安装 cnpm i webpack-dev-server --save-dev 2.配置好后执行 webpack-dev-server,这时候会报错 出现错误,只需要在pagejson里配置 ...
- webpack快速入门——CSS文件打包
1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...
- webpack快速入门——配置JS压缩,打包
1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...
- webpack快速入门——插件配置:HTML文件的发布
1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-web ...
随机推荐
- SpringInAction--面向切片的Spring以及如何使用注解创建切面
什么叫做切片..什么叫做AOP... 与大多数技术一样,AOP已经形成了自己的术语.描述切面的常用术语有通知(advice).切点(pointcut)和连接点(join point). (一大串书上的 ...
- New Concept English three (22)
34w 54 Some plays are so successful that they run for years on end. In many ways, this is unfortunat ...
- git clone 提示输入git@xxx的密码
如下: suse:~/ecox # git clone git@vcs.in.ww-it.cn:ecox/ecox.git 正克隆到 'ecox'... git@vcs.in.ww-it.cn's p ...
- [置顶]
Isolation Forest算法原理详解
本文只介绍原论文中的 Isolation Forest 孤立点检测算法的原理,实际的代码实现详解请参照我的另一篇博客:Isolation Forest算法实现详解. 或者读者可以到我的GitHub上去 ...
- 我个人所有的独立博客wordpress都被挂马
晕,所有的独立博客都中了这个,难怪访问有点慢,今天使用谷歌浏览器 来自知名恶意软件散布者 ***.net 的内容已经插入此网页.现在访问此网页很可能会导致您的计算机受到恶意软件入侵. 恶意软件是一种不 ...
- MySQL开放外部链接
问题 指令空格 执行命令netstat -nat | grep :3306的时候,注意grep后一定要有空格!!! 该指令的功能为:让服务器接受远程连接.不过这样只能用于本地连接. 真正外部链接详见 ...
- .net core web 中使用app.UseRouter的几种使用方式
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory ...
- 【导航】JennyHui没有宏大的计划,只有坚持!坚持!
学英语 口语 Bingo口语笔记 听力 VOA 词汇 生词积累 座右铭 随手记 TED X - > 笔记 JennyHui要成为程序猿(加油!!菜鸟终会成为大牛的!!) 后端知识 Python ...
- BZOJ5336 TJOI2018 party 【状压DP】*
BZOJ5336 TJOI2018 party Description 小豆参加了NOI的游园会,会场上每完成一个项目就会获得一个奖章,奖章 只会是N, O, I的字样.在会场上他收集到了K个奖章组成 ...
- 将 UWP 的有效像素(Effective Pixels)引入 WPF
在很久很久以前,WPF 诞生之初,有一个神奇的单位,它的名字叫做——设备无关单位(DIP,Device Independent Unit).微软给它描绘了一片美好的愿景——在任何显示器上显示的尺寸是相 ...