Webpack 不加载图像扩展答案

【问题标题】：Webpack not loading image extensionsWebpack 不加载图像扩展
【发布时间】：2019-06-10 01:30:26
【问题描述】：

我怎样才能让 webpack 加载我的图片扩展？我在 scr 文件夹中有如下图片

src/images/logo.png
scr/images/pic1.png

我在我的html文件中调用它们如下

<img src="images/logo.png" class="img-responsive" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Work Title">

我的webpack配置如下。

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
            {
                test: /\.(png|svg|jpg|gif|jpeg)$/,
                use: [
                    'file-loader?name=images/[name].[ext]'
                ]
            },
            {
                test: /\.png$/,
                use: [
                    'file-loader?name=images/[name].[ext]'
                ]
            },
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        })
    ]
};

但是，当我尝试运行应用程序时，我收到以下错误。

> wakili101@1.0.0 start /home/karanu/Documents/wakili101
> webpack-dev-server --open --mode development

ℹ ｢wds｣: Project is running at http://localhost:8082/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: Hash: 51a9c30e9d6832d4b753
Version: webpack 4.28.4
Time: 2451ms
Built at: 01/16/2019 3:47:58 AM
                Asset        Size  Chunks             Chunk Names
         ./index.html  1020 bytes          [emitted]
images/wakililogo.png    67 bytes          [emitted]
              main.js     1.2 MiB    main  [emitted]  main
Entrypoint main = main.js
[0] multi (webpack)-dev-server/client?http://localhost:8082 ./src 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/events/events.js] 8.13 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8082] (webpack)-dev-server/client?http://localhost:8082 7.78 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./src/index.js] 72 bytes {main} [built]
[./src/js/components/container/FormContainer.jsx] 3.66 KiB {main} [built]
    + 26 hidden modules

ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve './images/wakililogo' in '/home/karanu/Documents/wakili101/src':
  Error: Can't resolve './images/wakililogo' in '/home/karanu/Documents/wakili101/src'

  - compiler.js:79 childCompiler.runAsChild
    [wakili101]/[html-webpack-plugin]/lib/compiler.js:79:16

  - Compiler.js:300 compile
    [wakili101]/[webpack]/lib/Compiler.js:300:11

  - Compiler.js:556 hooks.afterCompile.callAsync.err
    [wakili101]/[webpack]/lib/Compiler.js:556:14


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [wakili101]/[tapable]/lib/Hook.js:154:20

  - Compiler.js:553 compilation.seal.err
    [wakili101]/[webpack]/lib/Compiler.js:553:30


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [wakili101]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1323 hooks.optimizeAssets.callAsync.err
    [wakili101]/[webpack]/lib/Compilation.js:1323:35



Child html-webpack-plugin for "index.html":
                    Asset      Size  Chunks             Chunk Names
    images/wakililogo.png  67 bytes          [emitted]
     + 1 hidden asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 22.3 KiB {0} [built]
    [./src/images/wakililogo.png] 67 bytes {0} [built]

    ERROR in ./src/index.html (./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html)
    Module not found: Error: Can't resolve './images/wakililogo' in '/home/karanu/Documents/wakili101/src'
     @ ./src/index.html (./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html) 1:16387-16417
ℹ ｢wdm｣: Failed to compile.

我已尝试更改图像的位置。这没有奏效。我尝试将图像从 png 更改为 jpeg，反之亦然，但这也没有奏效。

【问题讨论】：

标签： reactjs webpack babeljs webpack-style-loader webpack-file-loader

【解决方案1】：

尝试使用 Hisagr 所说的 url 加载器，但另外你不应该使用 <img src="images/logo.png"/> 当你想在你的反应项目中添加图像时。您应该使用<img src={require('images/logo.png')} />。我希望这会有所帮助。

【讨论】：

【解决方案2】：

尝试使用 url-loader 而不是 file-loader：

{
  test: /\.png$/,
  use: 'url-loader'
},

【讨论】：