ShakaCode | ShakaCode Blog | Rails On Maui Blog | Rails | ReactJs | JavaScript | Webpack | Productivity |

Import image using this webpack config react


#1

Hey,

How can I import an image using this webpack config?

I get the following error in the console after I build the app yarn build. How can I add the image to the dashboard file from the public folder? (please see image). Thanks in advance.

GET server/img/logo.a961dfbf36f110092c3f2d35778fa3db.png 404 (Not Found)

const webpack = require('webpack');
    const path = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CopyWebpackPlugin = require('copy-webpack-plugin');

    const extractCSS = new ExtractTextPlugin('[name].fonts.css');
    const extractSCSS = new ExtractTextPlugin('[name].styles.css');

    const BUILD_DIR = path.resolve(__dirname, 'build');
    const SRC_DIR = path.resolve(__dirname, 'src');

    console.log('BUILD_DIR', BUILD_DIR);
    console.log('SRC_DIR', SRC_DIR);

    module.exports = (env = {}) => {
      return {
        entry: {
          index: [SRC_DIR + '/index.js']
        },
        output: {
          path: BUILD_DIR,
          filename: '[name].bundle.js',
        },
        // watch: true,
        devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
        devServer: {
          contentBase: BUILD_DIR,
          //   port: 9001,
          compress: true,
          hot: true,
          open: true
        },
        module: {
          rules: [
            {
              test: /\.(js|jsx)$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  cacheDirectory: true,
                  presets: ['react', 'env']
                }
              }
            },
            {
              test: /\.html$/,
              loader: 'html-loader'
            },
            {
              test: /\.(scss)$/,
              use: ['css-hot-loader'].concat(extractSCSS.extract({
                fallback: 'style-loader',
                use: [
                  {
                    loader: 'css-loader',
                    options: {alias: {'../img': '../public/img'}}
                  },
                  {
                    loader: 'sass-loader'
                  }
                ]
              }))
            },
            {
              test: /\.css$/,
              use: extractCSS.extract({
                fallback: 'style-loader',
                use: 'css-loader'
              })
            },
            {
              test: /\.(png|jpg|jpeg|gif|ico)$/,
              use: [
                {
                  // loader: 'url-loader'
                  loader: 'file-loader',
                  options: {
                    name: './img/[name].[hash].[ext]'
                  }
                }
              ]
            },
            {
              test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'file-loader',
              options: {
                name: './fonts/[name].[hash].[ext]'
              }
            }]
        },
        plugins: [
          new webpack.HotModuleReplacementPlugin(),
          new webpack.optimize.UglifyJsPlugin({sourceMap: true}),
          new webpack.NamedModulesPlugin(),
          extractCSS,
          extractSCSS,
          new HtmlWebpackPlugin(
            {
              inject: true,
              template: './public/index.html'
            }
          ),
          new CopyWebpackPlugin([
              {from: './public/img', to: 'img'}
            ],
            {copyUnmodified: false}
          )
        ]
      }
    };


#2

I’m going to guess that you shouldn’t have server in your path. Try hitting this URL without the server part, and then try to figure out what is putting that string in the path.

Let me know if you’d like some 1:1 debugging time.