小白学 Webpack之图片打包 file-loader url-loader HTML-loader

webpack打包图片

如何把代码的中的图片进行提取

  • file-loader 主要提取javascript和css的图片,
  • url-loader 将图片转成base64编码,
  • html-loader将html文件内的图片进行提取

安装

npm install --save-dev file-loader url-loader html-loader

这里一起安装
找3张图片,小图一张,大图一张,中等图1张,
例如下面三张图片

保存为header-pic(13kb)
https://www.heibaiketang.com/upload/images/20191104/29baf2a8e863fe304f9418f568ef7a1194601.jpg 

保存为logo(34kb)
https://www.heibaiketang.com/upload/images/20191104/5bf817a14fa4cb5c7703bd52997f664e79710.png

保存为webpack(17kb)
  https://www.heibaiketang.com/upload/images/20201011/58543adf593872e9acaa25cf658c74a891522.png

描述

部署测试

|-- src
|   |-- css
|   |   |-- base.css
|   |   `-- color.css
|   |-- img
|   |   |-- header-pic.jpg
|   |   |-- logo.png
|   |   `-- webpack.png
|   |-- index.html
|   |-- index.js
|   |-- less
|   |   `-- style.less
|   `-- module.js
`-- webpack.config.js

修改style.less

h1{
    font-size: 20px;
    line-height: 50px;
    span{
        font-size: 14px;
    }
}
.logo{
    width: 200px;
    height: 120px;
    background-image: url("../img/logo.png");
    background-repeat: no-repeat;
    background-size: 100%;
}
.author{
    display: flex;
    .img{
        width: 100px;
        height: 100px;
        background-image: url("../img/header-pic.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
    }

}

修改 index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>黑白课堂</title>
</head>
<body>
<div class="logo">

</div>
<div class="author">
    <div class="img">

    </div>
    <h1>黑白课堂 webpack 课程</h1>
</div>

<h2>wepback 打包工具学习</h2>
<img src="./img/webpack.png" alt="">

</body>
</html>

如果现在打包会报错的,打包失败,所以还需要进行模块规则引入

模块引入 webpack.config.js

var path = require('path');

//插件
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  //入口文件
  entry: './src/index.js',
  output: {
    //文件名
    filename: 'js/main.js',
    path: path.resolve(__dirname, './dist/'),
    publicPath:'',
  },
  plugins: [
    new HtmlWebpackPlugin({
      //title: 'My App',
      filename: 'index.html',
      template: "./src/index.html"
    })
  ],
  devtool: "source-map",//地图
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css$/,//正则打包什么文件
        //先进后出,也就是先处理css-loader再进行style-loader
        use: [
          'style-loader', 'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader', 'css-loader', 'less-loader'
        ]
      },
      {
        test: /\.scss/,
        use: [
          'style-loader', 'css-loader', 'scss-loader'
        ]
      },
      {
        test: /(\.png|\.jpg|\.gif)$/,
        loader:'file-loader',
        options:{
          name:'./img/[name].[ext]' //打包存储位置
        }
      },
      {
        test: /\.html$/,
        use:['html-loader']

      }

    ]
  }
}

输出
描述
描述
我们再来定义一下,将小图片转成base-64

var path = require('path');

//插件
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  //入口文件
  entry: './src/index.js',
  output: {
    //文件名
    filename: 'js/main.js',
    path: path.resolve(__dirname, './dist/'),
    publicPath:'',
  },
  plugins: [
    new HtmlWebpackPlugin({
      //title: 'My App',
      filename: 'index.html',
      template: "./src/index.html"
    })
  ],
  devtool: "source-map",//地图
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css$/,//正则打包什么文件
        //先进后出,也就是先处理css-loader再进行style-loader
        use: [
          'style-loader', 'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader', 'css-loader', 'less-loader'
        ]
      },
      {
        test: /\.scss/,
        use: [
          'style-loader', 'css-loader', 'scss-loader'
        ]
      },
      {
        test: /(\.png|\.jpg|\.gif)$/,
        loader:'url-loader',//这个url-loader需要依赖file-loader,所以只需要引入一个即可
        options:{
          limit:1024*14,//设置图片大小小于这个则用base64 14KB转成base64
          name:'./img/[name].[ext]' //打包存储位置
        }
      },
      {
        test: /\.html$/,
        use:['html-loader']

      }

    ]
  }
}

描述

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。