webpack学习第三步——loader之打包图片文件

——loader:打包方案，对特定文件打包提供方案

在src中添加一个图片文件

import Header from './header'
import Sidebar from './sidebar'
import Content from './content'
import Avatar from './avatar.jpg'
    
new Header()
new Sidebar()
new Content()

• 这个时候用webpack打包会报错——因为webpack只会处理js文件，遇到jpg文件不知道如何处理，所以我们要使用file-loader来处理静态文件

file-loader

npm install file-loader -D

// webpack.config.js
const path = require('path')
module.exports = {
    mode: "development",
    entry: "./src/index.js", // 路径相对于webpack.config.js
    // 对jpg结尾的文件使用file-loader
    module: {
        rules: [{
            test: /\.jpg$/,
            use: 'file-loader'
        }]
    },
    output: {
        path: path.resolve(__dirname,'bundle'),// 绝对路径+bundle文件夹
        filename: 'bundle.js'
    }
}

• 打包后build文件夹下多出一个图片文件

  
  

• 在index.js中使用图片

import avatar from './avatar.jpg'
    
let img = new Image()
img.src = avatar
console.log(avatar)
let root =document.getElementById('root')
root.append(img)

• file-loader(打包静态文件)原理

  • jpg文件挪到build文件夹下
  • 把文件地址返回给变量

• 通过配置修改生成的图片文件的文件名

const path = require('path')
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    module: {
        rules: [{
            test: /\.jpg$/,
            use: {
                loader: "file-loader",
                options: {
                // 文件名称为初始文件名.初始文件后缀
                    name: '[name].[ext]'
                }
            }
        }]
    },
    output: {
        path: path.resolve(__dirname,'build'),
        filename: 'bundle.js'
    }
}

• 打包后生成的文件名（初始文件名.初始文件后缀）

• 给文件名加上hash值

const path = require('path')
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    module: {
        rules: [{
            test: /\.jpg$/,
            use: {
                loader: "file-loader",
                options: {
                // 加上本次打包的hash值
                    name: '[name]_[hash].[ext]'
                }
            }
        }]
    },
    output: {
        path: path.resolve(__dirname,'build'),
        filename: 'bundle.js'
    }
}

• 利用file-loader可以对多种图片文件进行处理

module: {
    rules: [{
        test: /\.(jpg|png|gif)$/,
        use: {
            loader: "file-loader",
            options: {
                name: '[name]_[hash].[ext]'
            }
        }
    }]
},

• 修改图片文件的输出路径——options里设置outputPath

const path = require('path')
module.exports = {
    mode: "development",
    entry: "./src/index.js", // 路径相对于webpack.config.js
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "file-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/'
                }
            }
        }]
    },
    output: {
        path: path.resolve(__dirname,'build'),
        filename: 'bundle.js'
    }
}

• 生成的build文件夹下多了images文件夹，里面存放着图片

url-loader

• url-loader和file-loader很像，都可以用来处理静态资源

npm install url-loader -D

const path = require('path')
module.exports = {
    mode: "development",
    entry: "./src/index.js", // 路径相对于webpack.config.js
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/'
                }
            }
        }]
    },
    output: {
        path: path.resolve(__dirname,'build'),// 绝对路径+bundle文件夹
        filename: 'bundle.js'
    }
}

• build文件夹下并没有图片文件，但是html里依然显示了图片

  
  

• url-loader是将图片文件进行base64位编码，存放在bundle.js中

  
  

• url-loader分文件大小进行不同处理

const path = require('path')
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    // 小于2kb进行base64位编码
                    limit: 2048
                }
            }
        }]
    },
    output: {
        path: path.resolve(__dirname,'build'),// 绝对路径+bundle文件夹
        filename: 'bundle.js'
    }
}

• 图片大于2kb,因此打包后依然生成了图片文件

  
  

file-loader还可以打包eot|ttf|svg等字体文件