Javascript 如何从JS文件导入图像

我正在练习webpack项目。我在导入img文件时出错。我是新的网页包。我已经安装了“图像网页包加载器”，但仍然有错误

下面是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是正确绑定的，但是当我为image工作时，它不工作，我在下面提到了一些错误

> 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

---

我的网页包版本为“网页包”：“^2.2.0-rc.0”。

我已获得此错误的答案。我做了更多的研究，发现了这个问题。这是一个让我生气的小问题

问题是我在代码中提到的为images扩展添加空间。请看下面的行

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

这句话让我很生气。你不能给他们之间的空间

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

---

您可能需要文件加载器。另外，最好从webpack v4开始，因为webpack 2I的很多内容都发生了更改。我已从npm安装了“文件加载器”模块，但仍然出现错误。