webpack-file-loader

1.什么是loader?

webpack的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件,
因为其他文件中没有模块的概念, 但是在企业开发中我们除了需要对JS进行打包以外,
还有可能需要对图片/CSS等进行打包, 所以为了能够让webpack能够对其它的文件类型进行打包,
在打包之前就必须将其它类型文件转换为webpack能够识别处理的模块,
用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader

2.如何使用loader

webpack中的loader都是用NodeJS编写的, 但是在企业开发中我们完全没有必要自己编写,
因为已经有众多大神帮我们编写好了企业中常用的loader, 我们只需要安装、配置、使用即可

2.1通过npm安装对应的loader

2.2按照loader作者的要求在webpack进行相关配置

2.3使用配置好的loader

3.fileloader使用

https://www.webpackjs.com/loaders/file-loader/

3.1安装file-loader

npm install --save-dev file-loader

3.2在webpack.config.js中配置file-loader

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

4.其他常用配置

4.1默认情况下fileloader生成的图片名就是文件内容的 MD5 哈希值

如果想打包后不修改图片的名称, 那么可以新增配置 name: “[name].[ext]”
其它命名规则详见: placeholders

4.2默认情况下fileloader会将生成的图片放到dist根目录下面

如果想打包之后放到指定目录下面, 那么可以新增配置 outputPath: “images/”

4.3publicPath

如果需要将图片托管到其它服务器, 那么只需在打包之前配置 publicPath: "托管服务器地址"即可

问题汇总

1.file-loader打包图片文件时路径错误输出为[object-module]的解决方法

由于file-loader新版本默认使用了esModule语法，造成了引用图片文件时的方式和以前的版本不一样

解决方法：两种，如stackflow所说的
1.加后缀

<img src="require('assets/logo.png').default"/>

2.修改配置文件 esModule: false

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

用file-loader打包字体图标

先来看在阿里巴巴矢量图库下载的字体图标

可用file-loader来处理，配置如下

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    use:[{
        loader: "file-loader",
        options: {
            name: "[name].[ext]",
            outputPath: "font/",
        }
    }]
}

注意点：在使用时，如果配置了css-loader模块化，则要注意引入和使用css的写法