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

最新推荐文章于 2024-05-09 09:54:56 发布

每一天，每一步

最新推荐文章于 2024-05-09 09:54:56 发布

阅读量564

点赞数

本文链接：https://blog.csdn.net/u010234868/article/details/120392354

版权

Vue 同时被 2 个专栏收录

123 篇文章 2 订阅

订阅专栏

webpack

20 篇文章 0 订阅

订阅专栏

App.js中引入图片：

import imgSrc from './fengjing.jpg';
// 注意单词不要拼写错误：from

var 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，编译成功：