上一节我们学习了，如何处理引入的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
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样式未完待续~~
Webpack 4x 之路 （ 三 ）
Webpack 4x 之路 （ 二 ）
Webpack 4x 之路 （ 一 ）