L
L
last_round2018-04-11 19:47:28
JavaScript
last_round, 2018-04-11 19:47:28

Why is Wabpack not finding images?

Why can't webpack find the image when building? I have a Vue component:

<template lang="pug">
    .form
        img(src="images/success.png")
</template>

And the picture is connected successfully, BUT if you specify in the styles:
.form{
    background: url('images/success.png');
}

it gives an error that the module cannot be found

Module not found: Error: Can't resolve './images/success.png'

webpack.config.js:
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './server/public'),
    publicPath: 'server/public',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        },
      },
      {
        test: /\.sсss$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
      new ExtractTextPlugin('style.css')
  ],
  devtool: '#eval-source-map'
}

If you see some kind of syntax error, like a comma or a bracket, then that's not the point, I cut out the excess, I didn't see something.
What can be wrong? I think maybe some loader is needed...

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