Webpack has stopped processing fonts and images

Question

been working with Webpack yesterday and set up a basic process with it that was working.

Come back today and the fonts are no longer being transferred to the 'dist' folder. I made a change to the webpack config file to try and process images and ever since then it hasn't worked. I have since reverted the changes but still not working.

webpack.config.js:

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'build.js',
        publicPath: path.build
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test:/\.(s*)css$/,
                use:['style-loader','css-loader', 'sass-loader']
            },
            {
                test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, 
                loader: 'file-loader?name=fonts/[name].[ext]'
            }
        ]
    }
};

I have fonts under: src/fonts/averta/

Previously these would go into dist/fonts. My build.js file is still being created fine. Any ideas?

Answer 1

I think the problem is with your loaders.

Try once changing the module object in webpack.config.js file to this:

module : {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    }, {
      test: /\.scss$/,
      exclude: ['node_modules'],
      use: ['style-loader', 'css-loader?importLoaders=1', 'sass-loader']
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      use: ['file-loader']
    }, {
      test: /\.(woff|woff2)$/,
      use: ['url-loader']
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      use: ['url-loader?limit=10000&mimetype=application/octet-stream']
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      use: ['url-loader?limit=10000&mimetype=image/svg+xml']
    }, {
      test: /\.gif/,
      use: ['url-loader?limit=10000&mimetype=image/gif']
    }, {
      test: /\.jpg/,
      use: ['url-loader?limit=10000&mimetype=image/jpg']
    }, {
      test: /\.png/,
      use: ['url-loader?limit=10000&mimetype=image/png']
    }
  ]
}

Answer 2

I have fixed this by adjusting the links in my SCSS files.

Not entirely sure why it worked before... my src url now just points to the file name e.g.:

src: url('averta-regular-webfont.ttf') format('truetype');