CODEWITHSUNDEEP
javascriptcssreactjswebpack
Sam
Sam

Reputation: 2331

Webpack only loads images referenced by css. Does not load images referenced by js

My dist folder contains my index.html, contact.html, index.js, contact.js, and two images that are mentioned by my css as background images.

ex.

background-image: url("../images/prairie.jpg");

That is everything in my dist folder. All other images(which my css does not mention) are not loaded. These images are only mentioned within .js files(ex. slideshow.js). This 'slideshow.js' file is a slideshow and it does not display any images, but shows the missing image icon. That background image mentioned earlier '../images/prairies.jpg' is shown. All the photos that are referenced by a css file are loaded into the dist folder. All photos mentioned only by a .js file and not a css file, are not loaded into the dist folder.

This is my webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const path = require('path');

const config = {
  mode: 'development',     // set mode option, 'development' or 'production'
  entry: {
    index: './src/index.js',
    contact:'./src/contact.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, // [email protected]
              disable: true, // [email protected] and newer
            },
          },
        ],
      }
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      inject: true,
      chunks: ['index'],
      filename: './index.html'
    }),
  new HtmlWebpackPlugin({
    template: './contact.html',
    inject: true,
    chunks: ['contact'],
    filename: './contact.html'
})
  ]
};

module.exports = config;

Upvotes: 0

Views: 711

Answers (1)

Keith
Keith

Reputation: 24181

When using webpack, when you also want to bundle images / assets. You can't access them using the normal url scheme,, eg. /images/my-image.png.

This is because your then telling your application to load the normal HTTP GET way, and not load via your bundle.

To access images from a bundle you do it like any other asset in webpack, you require it.. const image1 = require("images/image1.png") etc. Internally what webpack will be doing here is converting the binary image into a data uri. This means you can then do things like -> <img src={image1}/>

If you have lots of images you can use the require.context, but I personally avoid using this as I kind of like having more control of loaded assets.

To also handle funny files names, you can also let webpack produce sensible names with the hash appended instead. eg. In your loaders set the loader option to something like -> loader: 'file?name=[name].[ext]?[hash:5]'

UPDATE: Just thought if your using the file-loader plugin, ignore the bit about data uri, if using the file-loader webpack is doing a kind of remapping instead. If you don't use the file-loader, then it will do it using the data uri way.. But in both case's you use require..

Upvotes: 1

Related Questions