webpack-file-loader

在没有安装好 fileloader 之前你直接打包图片相关的资源的时候会报错我这里不在演示

什么是 loader

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

使用 loader

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

通过 npm 安装对应的 loader

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

然后就是使用配置好的loader

使用 fileloader

官方文档

安装 file-loader

npm install --save-dev file-loader

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

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

file-loader处理之后我们导入图片拿到的是图片打包之后的地址