Question

我在webpack项目上练习。我在导入img文件时遇到错误。我是webpack的新手。我已经安装了＆＃34; image-webpack-loader＆＃34;但仍然有错误。

这是webpack.config.js代码

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                use: 'babel-loader',
                test: /\.js$/,
            },
            {
                loader: ExtractTextPlugin.extract({
                    loader: 'css-loader'
                }),
                test: /\.css$/
            },
            {
                test: /\.(jpe?g | png | gif |svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 40000
                        }
                    },
                    'image-webpack-loader'
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css')
    ]
};

module.exports = config;

这是image_viewer.js文件

import '../assets/big.jpg';
import '../assets/small.jpg';

import '../styles/image_viewer.css';

const image = document.createElement('img');
image.src = 'http://lorempixel.com/400/400';

document.body.appendChild(image);

我无法找到解决此问题的方法。你可以看到这个问题。 style.css和build.js是正确捆绑的，但是当我为图像工作时它不起作用会出现我在下面提到的一些错误。

> webpack

keywords if/then/else require v5 option
Hash: 5ba37842c394273b5247
Version: webpack 2.2.0-rc.0
Time: 2330ms
    Asset      Size  Chunks             Chunk Names
bundle.js   4.38 kB       0  [emitted]  main
style.css  41 bytes       0  [emitted]  main
   [0] ./src/image_viewer.js 452 bytes {0} [built]
   [1] ./src/sum.js 177 bytes {0} [built]
   [2] ./assets/big.jpg 235 bytes {0} [built] [failed] [1 error]
   [3] ./assets/small.jpg 237 bytes {0} [built] [failed] [1 error]
   [4] ./styles/image_viewer.css 41 bytes {0} [built]
   [5] ./src/index.js 303 bytes {0} [built]
    + 1 hidden modules

ERROR in ./assets/small.jpg
Module parse failed: I:\Javascript & Angular & Node\webpack\assets\small.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/image_viewer.js 7:13-43
 @ ./src/index.js

ERROR in ./assets/big.jpg
Module parse failed: I:\Javascript & Angular & Node\webpack\assets\big.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/image_viewer.js 3:11-39
 @ ./src/index.js
Child extract-text-webpack-plugin:
       [1] ./~/css-loader!./styles/image_viewer.css 204 bytes {0} [built]
        + 1 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! jsmodule@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the jsmodule@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Engraved\AppData\Roaming\npm-cache\_logs\2018-05-27T10_29_34_980Z-debug.log

我的网站版本是＆＃34; webpack＆＃34;：＆＃34; ^ 2.2.0-rc.0＆＃34;。

Answer 1

我得到了这个错误的答案。我已经研究了更多，发现了这个问题。这是我疯狂的小问题。

问题是为我在代码中提到的图像扩展添加空间。见下面的行

test: /\.(jpe?g | png | gif |svg)$/

这条线让我很生气。你不能给它们之间的空间。

test: /\.(jpe?g|png|gif|svg)$/ - This is the correct.

如何从JS文件导入图像

1 个答案: