在没有安装好 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处理之后我们导入图片拿到的是图片打包之后的地址
问题也解决如下图所示