Getting Started
    Core Concepts
    Building Features
    API Reference
    Deployment
    Upgrading
    Migrating
    Pro
    Advanced Topics
    Misc
    Shakacode logoShakaCodeDeveloped by

    Copyright 2020 ShakaCode

    Configuring Images and Assets with Webpack

    1. leading slash necessary on the a. Option name for the file-loader and url-loader (todo reference) b. Option publicPath for the output (todo reference)
    const assetLoaderRules = [
      {
        test: /\.(jpe?g|png|gif|ico|woff)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: urlFileSizeCutover,
            // Leading slash is 100% needed
            name: 'images/[hash].[ext]',
          },
        },
      },
      {
        test: /\.(ttf|eot|svg)$/,
        use: {
          loader: 'file-loader',
          options: {
            // Leading slash is 100% needed
            name: '/images/[hash].[ext]',
          }
        },
      },
    ];
    

    A full example can be found at spec/dummy/client/app/startup/ImageExample.jsx

    You are free to use images either in image tags or as background images in SCSS files. You can use a "global" location of /client/app/assets/images or a relative path to your JS or SCSS file, as is done with CSS modules.

    images is a defined alias, so "images/foobar.jpg" would point to the file at /client/app/assets/images/foobar.jpg.

     resolve: {
        alias: {
          images: join(process.cwd(), 'app', 'assets', 'images'),
        },
      },