webpack 处理图片

我们希望在页面引入图片（包括 img 的 src 和 background 的 url）或设置字体。但是当我们基于 webpack 进行开发时，引入图片会遇到一些问题：(webpack是用JS写的，运行在node环境，所以默认webpack打包的时候只会处理JS之间的依赖关系！！！)

file-loader

file-loader 可以解析项目中的 url 引入（不仅限于 css），根据我们的配置，将图片拷贝到相应的路径，修改打包后文件引用路径，使之指向正确的文件

简单使用

wepack 配置

module.exports = {
    module:{
        rules:[
            {
                test:/\.(png|jpg|jpeg|gif)/,
                use:[{
                    loader:'file-loader',
                    options:{
                        esModule:false // 这里配置下面会说明
                    }
                }]
            }
        ]
    }
}

js图片资源导入

导入资源的二种方式

1. 通过 import xxx from ‘资源路径’
2. 通过 require(‘资源路径’）
   1. 注在webpack4 这样导入没有问题，在webpack 5 需要 require(‘资源路径’).default 的方式来导入
   2. 解决办法:配置file-loader 的option 里的esModule 为false 就可以

import myimg from './image/4.png'

const packImg =()=>{

    const odiv = document.createElement('div');

    const oimg = document.createElement('img');

    // oimg.src = require('./image/4.png').default
    oimg.src = require('./image/4.png')
    // oimg.src = myimg


    odiv.appendChild(oimg)

    return odiv

}

document.body.appendChild(packImg())

css图片资源导入

图片导入会使用esModule的方式导入 同样在webpack 4 不会有这样问题，在webpack5 需要我们配置一下css-loader 的esModule

.bg{
    width: 500px;
    height:600px;
    background-image: url('../image/1.jpeg')  // 这里图片导入会使用esModule的方式导入
      // background-image: url('../image/1.jpeg').default  // 但是我们又不能在css里 这样写 所以我们需要对css配置一下esModule

}

webpack配置

module.exports = {

    module:{
        rules:[
            {
                test:/\.(png|jpg|jpeg|gif)$/,
                use:[{
                    loader:'file-loader',
                    options:{
                        esModule:false
                    }
                }]
            },
            {
                test:/\.css$/,
                use:['style-loader', {
                    loader: 'css-loader',
                    options:{
                        esModule:false
                    }
                }]
            }
        ]
    }
}

file-loader 其他配置

名称配置

我们可以通过 option 的name 去配置打包后的文件名
name里面配置的是占位符：

[name]:文件名
[ext]:扩展名 也叫后缀
[hash] ：更具文件内md4 算法生成128为的哈希值
[contentHash]:和hash一样
[hash:]:对哈希的截取
[path]:文件路径

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

文件输出路径配置

module: {
        rules: [{
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name:'[name]-[hash:6].[ext]',
                          path:'img'
                        esModule: false
                    }
                }]
            }、
        ]
    }

简写

module: {
        rules: [{
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name:'img/[name]-[hash:6].[ext]',
                        esModule: false
                    }
                }]
            }、
        ]
    }