上一节我们学习了,如何处理引入的css文件,这节我们就来学习如何处理css中的图片问题吧。
css中图片处理
//我在 src/aseerts 下放了几张图片
// 然后在 src/styles/index.css中使用这些图片
// index.css
.img {
width: 500px;
height: 450px;
background: url('http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg');
}
.img1{
background: url('../asserts/1.jpg');
width: 500px;
height: 650px;
}
// 在index中也是用了一个图片路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="title"></div>
<div class="img"></div>
<div class="img1"></div>
<img src="./src/asserts/login1.png" alt="">
</body>
</html>
// 然后安装我们今天的主角
$ cnpm install url-loader file-loader --save-dev
// webpack.config.js
在我们的loader中配置
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpg|png|svg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit:500000, // 是把小于500000B的文件打成Base64的格式,写入JS。
name: 'images/[name]-[hash].[ext]'
}
}
]
}
]
// 然后打包一下
$ npm run dev
// 发现那些图片都没问题,然后打开浏览器的控制台你会发现在我们的head标签中多了几个style,css就内嵌在了head中了,这样其实也不是很好的我们一般的css都会单独分离出去的呢,这个问题我们在下面会讲到如何分离css文件的哦
$ npm run build
// 发现css中引入的图片没问题,但是在我们呢html中引入的图片路径是不对的,这个我们之后会学习到呢,大家不要着急
url-loader AND file-loader
- file-loader: 解决的是引用路径的问题,拿background的引入背景图片来说,我们都知道,webpack最终会将各个模块打包成一个文件。打包之前css中的url是相对于当前的css路径来引用的,但是我们打包完后css都包含到了我们的bundle.js中了,这里想对于的路径并不是之前我们css所在的目录下,所以会导致引入失败。这个问题就是通过file-loader来解决的。它可以解析我们项目中的url路径,(不仅限于是css)根据我们的配置,将图片拷贝到相应的地方,以配合我们打包结束后的js文件,让其能找到引入的图片路径。
- url-loader: 如果图片较多就会发送过多的http请求,会降低性能的,这个问题就是url-loader来解决的。url-loader会将引入的图片进行编码,生成dataURI,把图片编译为一段字符串码,在吧字符串打包到引入的位置。当然这个也又一定的弊端,如果我们的图片太大,就会导致编码消耗太多的性能,因此url-loader提供了一个
limit
参数,这个参数来限制图片的大小,如果低于这个限制,那么就使用dataURI的格式,如果是高于这个限制了,那么就交给file-loader来拷贝图片到指定的目录下。
大家可能发现我这里只是使用了url-loader
,并没有使用file-loader
。这是因为我们的url-loader
中已经封装了file-loader
,因此我们只需要引入url-loader
即可
- 文件大小小于
limit
参数,url-loader
将会把文件转为DataURL
(Base64格式); - 文件大小大于
limit
,url-loader
会调用file-loader
进行处理,参数也会直接传给file-loader
。
css文件分离
之前的学习我们已经成功的打包了css文件,也对css中的url做了一定的处理,现在我们就一起来学习,如何把css文件分离出来,以及如何处理分离出来的css中的图片路径问题吧。
*在webpack 3x中你可能会用extract-text-webpack-plugin
插件来实现,但是在webpack 4x之后则无法使用该插件了*
如果小伙伴你在webpack4x使用了extract-text-webpack-plugin
会编译出错的。这里小编推荐你mini-css-extract-plugin
// 首先安装
$ cnpm install mini-css-extract-plugin --save-dev
// webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分离css
const uglify = require('uglifyjs-webpack-plugin');// js代码压缩插件
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
module: {
rules: [
{
test: /\.(jpg|png|svg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit:500000,
name: 'images/[name]-[hash].[ext]'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body'
}),
new webpack.HotModuleReplacementPlugin()
]
}
if (isDev) {
config.devServer = {
host: 'localhost', // 服务器的IP地址,可以使用IP也可以使用localhost
compress: true, // 服务端压缩是否开启
port: 3000, // 端口
hot: true,
open: true
}
// 【1】 开发模式下使用style-loader,其实这个style-loader就是将我们的css打包到了style标签中,然后放在了head中
config.module.rules.push(
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
)
} else {
config.plugins.push(new uglify())
// 【2】生产模式下:添加一个插件
config.plugins.push(
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
)
// 【3】对loader也需要稍做修改
config.module.rules.push(
{
test: /\.css$/,
use: [ MiniCssExtractPlugin.loader, 'css-loader']
}
)
}
module.exports = config;
// 运行一下
$ npm run build
// 然后再dist目录下就会看到有一个main.css,可以看到里面就有我们的css样式
未完待续~~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。