《前端》使用webpack+vue从零开始打造前端项目(2020最新版)二之file-loader、url-loader----bilibili2021-01-18

五、file-loader 基本使用

file-loader的作用：

可以用来帮助webpack打包处理一系列的图片文件。比如：.png 、 .jpg 、.jepg等格式的图片。 

找到对应的资源文件，把资源文件改个名字，赋值到对应的dist目录下，且返回文件和文件名。

1、安装：

npm install -D file-loader

此时：

2、接下来需要对webpack进行配置（设置打包规则）

, {//当遇到以(~~)结尾文件时，用 file-loader来打包
            test: /\.(jpg|jpeg|png|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
            }
        }

3、在src文件夹下，新建assets文件夹，