C
C
cyberlain2018-08-03 15:51:35
JavaScript
cyberlain, 2018-08-03 15:51:35

Why are the images not showing up?

They gave a ready-made config with pug on board, everything is going well-updating-building, except that img(src="images/image") does not connect the image, tried different urls including http://localhost:8080/images/image - useless. Where is the mistake?

const autoprefixer = require('autoprefixer'),
      webpack      = require('webpack'),
      notify       = require('webpack-build-notifier'),
      clean        = require('clean-webpack-plugin'),
      path         = require('path'),
      css          = require('mini-css-extract-plugin'),
      mode         = checkMode(process.argv[process.argv.length - 1], 'production');

module.exports = {
  mode:mode,

  entry:{
    index:path.resolve(__dirname,'src/index.js'),
  },

  output:{
    path:path.resolve(__dirname, 'build'),
    filename:'js/[name].js',
  },

  module:{
    rules:[
      // JS
      {
        test:/\.js?$/,
        exclude:/node_modules/,
        loader:'babel-loader',
        query:{
          presets:['es2015']
        }
      },

      // PUG
      {
        test:/\.pug$/,
        use:[

          {
            loader:'file-loader',
            options:{
              name:'[name].html',
            }
          },

          {
            loader:'pug-html-loader',
            options:{
              pretty:true
            }
          },

        ],
      },

      // SCSS
      {
        test:/\.(scss)$/,
        use:[

          {
            loader:css.loader,
            options:{
              publicPath:'../',
              sourceMap:true,
            }
          },

          {
            loader:'css-loader',
            options:{
              sourceMap:true,
              minimize: mode,
            }
          },

          {
            loader:'resolve-url-loader',
            options:{
            }
          },

          {
            loader:'postcss-loader',
            options:{
              ident: 'postcss',
              plugins:[
                autoprefixer({
                  browsers:['ie >= 8', 'last 4 version']
                })
              ]
            }
          },

          {
            loader:'sass-loader',
            options:{
              sourceMap:true,
              data:'$mode:' + mode + ';',
            }
          }

        ]
      },


      // CSS
      {
        test:/\.css$/,
        use:[

          {
            loader:css.loader,
            options:{
              sourceMap:true,
            }
          },

          {
            loader:'css-loader',
            options:{
              sourceMap:true,
              minimize: mode,
            }
          }

        ]

      },

      // IMG
      {
        test:/\.(png|jpg|gif|svg)$/,
        exclude:/fonts/,
        use:{
          loader:'file-loader',
          options:{
            name:'[name].[ext]',
            outputPath:'images/',
          }
        }
      },

      // FONTS
      {
        test:/\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
        exclude:/images/,
        use:[
          {
            loader:'file-loader',
            options:{
              name:'fonts/[name].[ext]',
              publicPath:'../',
            }
          }
        ]
      },

    ]

  },

  plugins:[
    new clean('build/',{
      "allowExternal": false,
      "verbose":false
    }),
    new css({filename:'css/[name].css'}),
    new webpack.ProvidePlugin({
      $:'jquery',
      jQuery:'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    }),
    new notify({
      "title":"Project",
      "suppressSuccess":true
    })
  ],

  resolve:{
    modules:[
      'node_modules',
      'src/components',
      'src/vendor',
    ],
    extensions:['.js','.pug']
  },

  devtool:mode?'none':'inline-source-map',

  devServer:{
    contentBase:path.resolve(__dirname, 'build'),
    compress:true,
    port:8080
  }

}

function checkMode(argv, check){
  return argv.slice(7,argv.length) === check;
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question