webpack的核心概念loader之file loader

参考链接

Loader的作用

webpack默认只能处理js文件，如果项目中使用了图片，css，less，vue以及其他非js文件，webpack就不知道该怎么办了，这个时候loader就闪亮登场了，loader可以帮助我们处理特定类型的文件，有了合适的loader，webpack就可以正确的对一些非js文件进行翻译了，下面来看一个简单的案例：
项目根目录为:02webpack-demo
在根目录下有一个src文件夹，里面存放了一个入口文件index.js和一个存放静态资源的assets文件夹，在index.js中引入了一张图片，代码如下:

import avatar from './assets/bottom.png'//导入了一张图片
var img = new Image();//创建了一个img元素
img.src = avatar;//将img的src属性指向引入的图片
document.body.appendChild(img)//将img添加到页面的body元素中

这个时候我们在终端中使用scripts对文件进行打包，终端中会报一个错,如下所示:

error.png
通过查阅相关资料，我们知道了可以通过file-loader对图片资源进行正确的处理，于是在项目中我们需要安装file-loader,并在webpack.config.js中进行相关的配置，
(1)安装file-loader

npm install file-loader -D

(2)配置webpack.config.js

var path = require('path'); //引入node的核心模块path，来处理路径
module.exports = {
    mode: 'development',
    entry: './src/index.js', //入口文件为当前目录下的src下的index.js文件
    module: {//这里是新增的配置
        rules: [{
            test: /\.(jpe?g|png|gif)$/,
            use: {
                loader: 'file-loader'
            }
        }]
    },
    output: {
        filename: 'bundle.js', //打包后的文件名
        path: path.resolve(__dirname, 'bundle') //__dirname:表示当前文件所在的文件目录，也就是项目根目录
    },

}

新增的配置的意思是当我们依赖的模块是以.png|.jpg|jpeg|gif结尾的文件时，使用file-loader来对这一类型的文件进行处理，做完这些之后，执行npm run bundle(因为我在package.json里面配置了 scripts：{
‘bundle’:'webpack'},所以我这里就可以直接运行 npm run bundle来进行打包了 )重新打包代码,就不会有报错了，并且在我们的打包输出文件夹bundle下多了一个长长的图片文件，如下图所示:

img1.png
打开浏览器，可以看到图片可以正确的显示在页面上,如下所示:
img.png
至此，我们已经可以对图片进行正确的处理了，但是有些小伙伴可能会说，我想要打包后的图片名称和打包之前保持一致，那我们就需要对loader做一些额外的配置了

修改打包后的图片的名称

修改webpack.config.js文件

var path = require('path'); //引入node的核心模块path，来处理路径
module.exports = {
    mode: 'development',
    entry: './src/index.js', //入口文件为当前目录下的src下的index.js文件
    module: {
        rules: [{
            test: /\.(jpe?g|png|gif|svg)$/,
            use: {
                loader: 'file-loader',
                options: {//新增的代码
              //placeholder  占位符
                    name: '[name]. [ext]'
                }
            }
        }]
    },
    output: {
        filename: 'bundle.js', //打包后的文件名
        path: path.resolve(__dirname, 'bundle') //__dirname:表示当前文件所在的文件目录，也就是项目根目录
    },

}

在上面的代码中，我们新增了options选项对打包生成的文件做了一些配置，name: '[name]. [ext]'这句代码动态获取了要打包的图片的名字和后缀，并将打包生成的图片的名字和后缀设置为对应的值，修改完成后，我们重新进行打包，执行npm run bundle，这时在打包生成的文件夹中就多了一个和原图片名称一模一样的文件了，如图所示:

i.png
通过在项目中为了给图片添加唯一标识，因为有可能不同的模块会有相同名称的图片，这样在打包到同一个文件夹中时可能会发生冲突，那么我们呢就可以给图片添加hash值来区分不同的图片，将options修改如下:

             options: {
                    name: '[name]_[hash:6]. [ext]'//这里我们给图片名添加了6位的hash值
                }

重新打包代码，我们就会得到一个名字和原来图片的一样但是多了6位hash值的图片了，如下所示:

img2.png

当然我们可以将打包生成的图片文件存放到一个单独的文件夹中，这需要给options选项添加一个outputPath的配置项，options修改如下：

         options: {
                    name: '[name]_[hash:6]. [ext]',
                    outputPath: 'images'//这句代码表示将打包后的图片存放到images文件夹下
                }

打包完成后，就会在bundle文件夹下新建一个images的文件夹，里面存放的就是打包后的图片：

img3.png

回到浏览器中，可以看到我们大图片还是可以正常显示