The bug encountered when webpack packs pictures

Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The “from” argument must be of type string. Received undefined

Insert picture description here
When using url-loader, the limit is too small. We need to install file-loader and lower the version of url-loader and file-loader.
Insert picture description here

After modifying the packge.json to the following version (the low version I found casually) execute npm install

	"url-loader": "^1.1.1",
	"file-loader": "^1.1.1",

After setting the name attribute in options, if the size of the picture is larger than the preset value, it will be copied directly to the dist folder, otherwise it will be converted to base64 encoding.

		{
    
    
            // DOS只允许后缀名为三个htm,jpg == html,jpeg
            test: /\.(png|jpg|gif|jpeg)$/,
            use: [{
    
    
                loader: 'url-loader',
                options: {
    
    
                    // 当加载的图片,小于limit时,会将图片编译成base64字符串形式。
                    // 当加载的图片,大于limit时,需要使用file-loader模块进行加载。
                    limit: 13000,
                    // 给name加上[]是还原图片原本的名字,不加就都叫name.jpg
                    // extension
                    name: 'img/[name].[hash:8].[ext]',
                }
            }]
        }

Guess you like

Origin blog.csdn.net/weixin_45773503/article/details/113106322