CODEWITHSUNDEEP
webpackwebpack-4
Alexander Zeitler
Alexander Zeitler

Reputation: 13109

What's the sane webpack 4 (2018) way to include images in img tags

What's the sane webpack 4 (2018) way to include images in img tags in my index.html?

Considering my folder structure is this:

- dist
- src
  - assets
    - images
      - myimage.png
  - index.html
  - index.js

In my index.html I want to use <image src="assets/images/myimage.png" />

In the end I want my index.html to be part of the dist folder.

Update:

I solved it using this webpack.config.js but there are still some issues:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [{
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: {
          loader: 'file-loader',
        },
      },
      {
        test: /\.html$/,
        loaders: 'file-loader?name=[name].[ext]!extract-loader!html-loader',
      },
    ],
  },
};

That way I get an index.html in my dist folder and <img src="assets/images/myimage.png" /> is replaced by <img src="2e06734dcef5b5db431246a4a4f626f5.png"/>.

My src/index.js looks like this:

import './index.html'
import './style.scss'

Everything would be fine but chaining the loaders as in loaders: 'file-loader?name=[name].[ext]!extract-loader!html-loader' is deprecated.

So the remaining question is: How to achieve that loader chain without using deprecated features?

Upvotes: 1

Views: 340

Answers (1)

Alexander Zeitler
Alexander Zeitler

Reputation: 13109

This webpack.config.js solved it for me:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [{
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: {
          loader: 'file-loader',
        },
      },
      {
        test: /\.html$/,
        use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
      },
    ],
  },
};

Upvotes: 1

Related Questions