js file 对象_webpack - file-loader 打包路径错误问题

引言：webpack默认只能打包js文件，想要在代码中引用其他文件类型，需要不同的loader来处理。当代码中使用图片(png|jpe?g|gif)时，需要用到file-loader进行编译。然后再进行webpack打包。

file-loader用法：版本@4.0.0

配置：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

使用:

注意：要在html中引用图片进行打包需要安装html-withimg-loader，html-withimg-loader会调用file-loader来对图片进行处理，再参与打包。

 //css  用法
background: url('../cover.jpg')

//js 用法
let img =new Image()
let src = require ('../cover.jpg')
// import src from '../cover.jpg'
console.log(src,1000)
img.src = src
document.body.appendChild(img)

//html用法
 <img src="./cover.jpg">

低版本的用法到此就结束了。

注意：

但是在版本@6.0.0 的使用中出现了问题，在html中使用和在js中使用都出现了打包链接错误的现象。如下：

//html
打包前：<img src="./cover.jpg">  =>打包后<img src="{&quot;default&quot;:&quot;images/ec7912772accb93cf96e84407a5459d4.jpg&quot;}">
//js
let src  = require ('../cover.jpg');console.log(src,1000);  =>Module {default: "images/ec7912772accb93cf96e84407a5459d4.jpg", __esModule: true, Symbol(Symbol.toStringTag): "Module"}

可以发现打包后的链接变成了一个对象，这是因为file-loader@6.0.0版本中，为了优化性能新增了一个关键的配置项esModule 。这个配置项的作用，是指定引入文件的方式，是否指定es module的形式引入（也就是 improt name from ‘url’）这个配置项默认值是true，如果是true的情况下，那再使用require或者<imgsrc="./cover.jpg">引用方式就会出现上面的问题。

解决方法：把esModule这个配置项配置为false，或者在js中使用improt语法引入import src from '../cover.jpg'。但是即使在js中使用了import语法还是解决不了在html中的引用问题。所以可以选择直接把esModule配置为false即可。配置示例：

rules: [
       {
                test: /.(png|jpg|gif)$/,
                use: [{
                    loader: "file-loader", options: {
                        esModule:false
                    }
                }]
            },
    ]

这样在js和html中就可以随意引入。

一坑刚平一坑又起！在此我联想到url-loader，url-loader可以指定图片在某个大小范围内直接编译成base64插入到页面，编译成base64来显示。基本配置如下。

{ loader: 'url-loader',  options: {  limit: 10*1024, }, }

这样就指定了小于10kb的图片直接打包成base64。

但是url-loader只负责把图片编译成base64，base64也可以看做一个链接，这个链接最终还是要交给file-loader来处理。file-loader会把这个链接进行编译成一个内部链接进行插入，上文提到file-loader添加了新的配置想esmodule，那url-loader势必要给出对应的配置项来配合。经查看文档，果不其然。url-loader文档如下：

这个esModule配置项和file-loader的esmodule完全一样。

引用file-loader：https://github.com/webpack-contrib/file-loader

url-loader:https://www.npmjs.com/package/url-loader#esmodule

html-withimg-loader:https://www.npmjs.com/package/html-withimg-loader