3

上一节我们学习了,如何处理引入的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即可

  1. 文件大小小于limit参数,url-loader将会把文件转为DataURL(Base64格式);
  2. 文件大小大于limiturl-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 之路 ( 一 )


Meils
1.6k 声望157 粉丝

前端开发实践者