Webpack 4 file-loader works on font files, but not image files

Question

I am trying to get Webpack 4 to output a .png file into /dist/assets, and have that be used by my index.html file via file-loader.

The .png file does output into dist/assets, but it does not get loaded in by the browser. Funny thing, I treat my .png files the same as my font files in my webpack.config.js, and the font files are loaded in by the browser.

Below is my file directory when building

Below is code from webpack.config.js that I believe to be pertinent to this issue.

module.exports = {
  entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  },
   module: {
     rules: [
     ...
       {
          test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: './assets'
       }
     },
   ...

The whole webpack.config.js is below, or can be found (along with the other files) at the repository in which this code is hosted at.

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      /*publicPath: 'dist'*/
  },
   module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
            }
          }
        },
        {
         test: /\.vue$/,
         //exclude: /node_modules/,
         loader: 'vue-loader',
       },
       {
         test: /\.(sa|sc)ss$/,
         exclude: /node_modules/,
         use: [
           MiniCssExtractPlugin.loader,
           'css-loader',
           'sass-loader' // Loads a sass / scss file and compiles it to CSS
         ]
       },
       {
         test: /\.css$/,
         use: [
           MiniCssExtractPlugin.loader,
           'css-loader'
         ]
       },
        {
           test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',
             outputPath: './assets'
           }
        },
        {
          test: /\.svg$/,
          use: [
            'vue-svg-icon-loader'
          ],
        }
      ]
   },
   resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      },
      extensions: ['*', '.js', '.vue', '.json']
    },
    plugins: [
      new VueLoaderPlugin(),
      new MiniCssExtractPlugin({
        filename: 'bundle.css',
        chunckFilename: '[id].css',
      })
    ]
}

ippi · Accepted Answer · 2018-06-28T07:44:22.240

I tried it out, and it works fine with just a minor detail.

I think the real magic here is how wepback-dev-server finds your index.html, and if anything I think that should break. Anyway:

Your build (npm run prod --> webpack --mode production) creates all the right files, but there are no changes to index.html, and there is no index.html generated in your dist-folder. Usually you copy index or generate from a template for cache-busting (copy-webpack-plugin / html-webpack-plugin) but for now I just copied index.html to the dist folder manually.

Of course now the index pointed at the the wrong assets so I updated:

from:   href="./dist/bundle.css"   and   src="./dist/bundle.js"
  to:   href="./bundle.css"        and   src="./bundle.js"

and it worked immediately (with placeholder.png and everything). The dist-folder is what you want to serve, so make sure your index-file works from there and not from your project-root.

I used http-server to test from the dist folder.

Okay, that does make sense that my `index.html` file should be included in my /dist. I'll make those changes, use copy-webpack-plugin, and see how it goes. Thanks! — hyperupcall, Jun 28 '18 at 07:47
I used copy-webpack-plugin, to put my index.html in the dist folder. It works great now. Thanks for the help! — hyperupcall, Jun 28 '18 at 08:24

Webpack 4 file-loader works on font files, but not image files

1 Answers1