webpack打包url-loader和file-loader的使用及遇到的问题

本文主要是介绍webpack打包url-loader和file-loader的使用及遇到的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

App.js中引入图片：

import imgSrc from './fengjing.jpg';
// 注意单词不要拼写错误：fromvar app = {data() {return {imgSrc: imgSrc}},template: `<div><img src="imgSrc" /></div>`
};export default app;

安装url-loader、file-loader：

cnpm i url-loader@1.1.2 file-loader@2.0.0 -D

webpack.dev.config.js中配置：

module: {loaders: [{// 错误写法：test: '/\.(jpg|jpeg|png|gif|svg)$/',test: /\.(jpg|jpeg|png|gif|svg)$/,loader: 'url-loader?limit=200000'// limit=200000为限制条件：图片大小小于200000时，会编译为base64文件}]
},

执行：npm run dev，报错：

ERROR in ./fengjing.jpg
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)@ ./App.js 1:0-36@ ./main.js

 错误原因：test后面的正则表达式加了单引号。

一定按照webpack的配置规则来！

修改错误后再次执行：npm run dev，编译成功：

这篇关于webpack打包url-loader和file-loader的使用及遇到的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---