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 ...
随机推荐
- QUnit 学习笔记 使用说明(一)
一.单元测试前言 什么是单元测试? 如果是新接触单元测试的童鞋,简要的解释:就是一个JS函数/功能/模块的测试. 单元测试的工具:这里介绍QUnit Qunit原本是jqury家的,不过现在已经独立了 ...
- vue开发环境搭建Mac版
一.前言 要做一个移动端app,面对webapp最流行的三个技术React,angular,vue,三选一,如何选,可参考blog移动app技术选型,react,angular, vue, 下面是对 ...
- 2018.11.15 RF antenna impedance-matching
We have studied the impedance-matching of RF transmission line between the antenna and the RX / TX m ...
- LINUX系统下的磁盘共享
在一台主机上实现磁盘的共享:在另一台主机中进行使用.具体操作如下: 1)在服务器端(server) 1.安装软件和磁盘的划分 yum install targetcli.noarch -y ...
- mybatis环境搭建和开发步骤
环境搭建 第一步:导入jar包 第二步:导入核心配置文件(mybatis-config.xml) <?xml version="1.0" encoding="UTF ...
- Java数据封装类
项目中用到,比较好用!! 用户前端与后台的交互数据,这个封装类中包含分页.数据.错误码.状态码等信息!! 亲测好用哦! 一个类DataWrapper public class DataWrapper& ...
- python的文件编码注释
在python源文件的第一行或第二行写入如下内容: # -*- coding:gbk -*- # 设置源文件编码格式为gbk 或 # -*- coding:utf-8 -*- # 设置源文件编码格式为 ...
- SQL Server Profiler 跟踪远程服务器的语句
同事测试软件报错,想连Ta的数据库跟踪下语句,结果提示: 对比了下自己的探查器设置,勾选几个事件就可以了:
- 每天一个linux命令:【转载】cd命令
Linux cd 命令可以说是Linux中最基本的命令语句,其他的命令语句要进行操作,都是建立在使用 cd 命令上的. 所以,学习Linux 常用命令,首先就要学好 cd 命令的使用方法技巧. 1. ...
- 从 “x is null 和 x == null” 的区别看 C# 7 模式匹配中常量和 null 的匹配
尝试过写 if (x is null)?它与 if (x == null) 相比,孰优孰劣呢? x is null 还有 x is constant 是 C# 7.0 中引入的模式匹配(Pattern ...