CODEWITHSUNDEEP
javascripthtmlnode.jsnpmwebpack
GodOfProgrammers
GodOfProgrammers

Reputation: 127

Webpack - file-loader not working (unable to load svg file in my html dynamically)

package.json:

{
  "name": "webpackTutorial",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bootstrap": "^4.3.1",
    "css-loader": "^3.2.0",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.2.2"
  }
}

webpack.common.js:

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = { 
// devtool:"none",
entry:"./src/index.js",
plugins: [new HtmlWebpackPlugin({
    template: "./src/template.html"
})],
module: { 
rules: [ { 
    test:/\.scss$/,
    use:["style-loader","css-loader","sass-loader"]
},
{ 
    test:/\.html$/,
    use:["html-loader"]
},
{
    test: /\.(svg|png|jpg|gif)$/,
    use: {
      loader: "file-loader",
      options: {
        name: "[name].[hash].[ext]",
        outputPath: "imgs"
      }
    }
  }
]
}
};

webpack.dev.js:

const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{ 
mode: "development",
// devtool:"none",
output: { 
filename:"main.js",
path:path.resolve(__dirname,"dist")
},
});

webpack.prod.js:

const path = require("path")
const common = require("./webpack.common")
const merge = require("webpack-merge")
module.exports = merge(common,{ 
mode: "production",
// devtool:"none",
output: { 
filename:"main.[contentHash].js",
path:path.resolve(__dirname,"dist")
},
});

Html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    /> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    /> -->
    <title>Webpack Demo</title>
  </head>
  <body class="container">
    <h1 class="text-center mt-5">
      Welcome!
    </h1>
    <div class="alert alert-danger" id="error" role="alert"></div>
    <div class="row mt-5">
      <div class="col">
        <div class="input-group">
          <input type="text" id="numberOne" class="form-control" />
          <div class="input-group-append input-group-prepend">
            <span class="input-group-text">+</span>
          </div>
          <input type="text" id="numberTwo" class="form-control" />
        </div>
      </div>
      <div class="col">
        <button id="addValues" class="btn btn-primary">Add Values</button>
      </div>
    </div>
    <div class="card mt-5">
      <div class="card-body">The result is: <span id="result"></span></div>
    </div>
    <img src="./assets/webpackImage.jpeg" width="300"/>
  <script type="text/javascript" src="main.cde0d608a66b63a7423e.js"></script></body>
</html>

As you can see <img src="./assets/webpackImage.jpeg" width="300"/> the src of the image is not dynamically linked with a hash (webpack). Is this a problem with the file-loader or something else? The error I got when I tried to bundle with the npm run build script is:

$ npm run build

> [email protected] build C:\Users\AIRBORNE ROYAL GROUP\desktop\webpack
> webpack --config webpack.prod.js

Hash: 08bd854655be2715fd49
Version: webpack 4.41.2
Time: 3322ms
Built at: 11/30/2019 4:05:57 PM
 2 assets
Entrypoint main = main.cde0d608a66b63a7423e.js
[0] ./src/main.scss 443 bytes {0} [built]
[1] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/main.scss 140 KiB {0} [built]
[4] ./src/index.js + 5 modules 2.31 KiB {0} [built]
    | ./src/index.js 312 bytes [built]
    | ./src/app/app.js 635 bytes [built]
    | ./src/app/alert.service.js 652 bytes [built]
    | ./src/app/component.service.js 546 bytes [built]
    | ./src/app/utils/inputs-are-valid.js 127 bytes [built]
    | ./src/app/utils/parse-inputs.js 93 bytes [built]
    + 2 hidden modules

ERROR in   Error: Child compilation failed:
  Module parse failed: Unexpected character '�' (1:0)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  (Source code omitted for this binary file):
  SyntaxError: Unexpected character '�' (1:0)

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

  - Compiler.js:343 
    [webpack]/[webpack]/lib/Compiler.js:343:11

  - Compiler.js:681 
    [webpack]/[webpack]/lib/Compiler.js:681:15


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

  - Compiler.js:678 
    [webpack]/[webpack]/lib/Compiler.js:678:31


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

  - Compilation.js:1423 
    [webpack]/[webpack]/lib/Compilation.js:1423:35


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

  - Compilation.js:1414 
    [webpack]/[webpack]/lib/Compilation.js:1414:32


  - index.js:321 
    [webpack]/[terser-webpack-plugin]/dist/index.js:321:9

  - TaskRunner.js:48 TaskRunner.run
    [webpack]/[terser-webpack-plugin]/dist/TaskRunner.js:48:7

  - index.js:227 TerserPlugin.optimizeFn
    [webpack]/[terser-webpack-plugin]/dist/index.js:227:18


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

  - Compilation.js:1409 
    [webpack]/[webpack]/lib/Compilation.js:1409:36


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

  - Compilation.js:1405 
    [webpack]/[webpack]/lib/Compilation.js:1405:32


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

  - Compilation.js:1342 Compilation.seal
    [webpack]/[webpack]/lib/Compilation.js:1342:27

  - Compiler.js:675 
    [webpack]/[webpack]/lib/Compiler.js:675:18

  - Compilation.js:1261 
    [webpack]/[webpack]/lib/Compilation.js:1261:4


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

  - Compilation.js:1253 Compilation.finish
    [webpack]/[webpack]/lib/Compilation.js:1253:28

  - Compiler.js:672 
    [webpack]/[webpack]/lib/Compiler.js:672:17


  - Compilation.js:1185 
    [webpack]/[webpack]/lib/Compilation.js:1185:12

  - Compilation.js:1097 
    [webpack]/[webpack]/lib/Compilation.js:1097:9

  - task_queues.js:75 processTicksAndRejections
    internal/process/task_queues.js:75:11


Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/template.html 1.62 KiB {0} [built]
    [1] ./src/assets/webpackImage.jpeg 281 bytes {0} [built] [failed] [1 error]

    ERROR in ./src/assets/webpackImage.jpeg 1:0
    Module parse failed: Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)
     @ ./src/template.html (./node_modules/html-webpack-plugin/lib/loader.js!./src/template.html) 1:1576-1613
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack --config webpack.prod.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] 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\AIRBORNE ROYAL GROUP\AppData\Roaming\npm-cache\_logs\2019-11-30T08_05_57_228Z-debug.log

Upvotes: 3

Views: 7615

Answers (1)

nickbullock
nickbullock

Reputation: 6589

Your image has extension jpeg, but there is no rule for it test: /\.(svg|png|jpg|gif)$/.
Change it to test: /\.(svg|png|jpe?g|gif)$/ or test: /\.(svg|png|jpg|jpeg|gif)$/

Upvotes: 3

Related Questions