Webpack не загружает расширения изображений - PullRequest
Новая
       13

Webpack не загружает расширения изображений

0 голосов
/ 16 января 2019

Как я могу сделать так, чтобы веб-пакет загружал мое расширение изображения? У меня есть изображения внутри папки 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">

Моя конфигурация веб-пакета следующая. 

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 и наоборот, но это тоже не сработало.

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Попробуйте url loader, как сказал Хисагр, но дополнительно не следует <img src="images/logo.png"/> когда вы хотите добавить изображение в ваш реактивный проект. Вы должны использовать <img src={require('images/logo.png')} />. Надеюсь, это поможет.

0 голосов
/ 16 января 2019

Попробуйте url-загрузчик вместо file-loader: 

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