Giter Club home page Giter Club logo

Comments (7)

tcoopman avatar tcoopman commented on August 16, 2024 1

If you want the font-awesome\fonts\fontawesome-webfont.svg?v=4.3.0 to be run through the image-loader you should change the test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, line to include the image-loader.

If you remove that test, the regex /\.(jpe?g|png|gif|svg)$/i won't match webfont.svg?v=4.3.0, that's why you get the other error when you remove that line. That also means that your initial issue has nothing to do with image-loader as the file is not run through the image-loader at all, so I'm going to close this.

I would think that your problem has something to do with how you run/access your code. How do you do that? With webpack-dev-server?

I also see that your image-loader doesn't include svg optimization at the moment, if you want those, you need to add some svgo options. See https://github.com/tcoopman/image-webpack-loader/blob/master/test/webpack.config.js for an example.

from image-webpack-loader.

tcoopman avatar tcoopman commented on August 16, 2024

Without your full webpack config this is a bit hard to say.
Do you have the same problem if you remove the file-loader?

If the svg file itself is correct I would guess this is a problem with file-loader or your webpack config.

The image-loader only optimizes the svg, the filename is decided by the file-loader and the assets path by webpack.

from image-webpack-loader.

newtonianb avatar newtonianb commented on August 16, 2024

Hi @tcoopman, I just realised I also had this configuration {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "file"}, when I removed it I now get this on compilation

Module parse failed:
D:\prj\a\node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.3.0 Line 1:
Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

My full webpack config is the following

var webpackConfig = {
        context: jsSrc,

        resolve: {
            extensions: ['', '.js', '.coffee', '.scss', '.css'],
            modulesDirectories: [node_dir, bower_dir]
        },

        module: {
            loaders: [
                {
                    test: /[\\\/]bower_components[\\\/]modernizr[\\\/]modernizr\.js$/,
                    loader: "imports?this=>window!exports?window.Modernizr"
                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    loaders: [
                        'file?hash=sha512&digest=hex&name=[hash].[ext]',
                        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                    ]
                },
                {
                    test: /\.coffee$/, loader: 'coffee-loader'
                },                
                {
                    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file"
                },
                {
                    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file"
                },
                {
                    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file"
                },
                {
                    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"
                },
                {
                    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "file"
                },
                {
                    test: /\.scss$/,
                    loader: 'style-loader!css-loader!sass-loader?' + JSON.stringify({ includePaths: [ stylesSrc ], sourceMap : env == 'development' })
                },
                {
                    test: /\.css$/,
                    loader: "style-loader!css-loader"
                }
            ],
            noParse: [],
        },

        entry: {
            icons: ['./styles/icons.coffee']
        },

        output = {
            path: jsDest,
            filename: '[name].js',
            publicPath: '/assets/',
            chunkFilename: "/js/[id].js"
        }        
    }

from image-webpack-loader.

newtonianb avatar newtonianb commented on August 16, 2024

Ah yes I didn't realize font-awesome css had this added get parameter to the font path thank you.
I am currently using gulp with browsersync, webpack calls browsersync to reload on watch

    webpack(config).watch(200, function (err, stats) {
        logger(err, stats)
        browserSync.reload()
        // On the initial compile, let gulp know the task is done
        if (!built) {
            built = true;
            callback()
        }
    })

from image-webpack-loader.

tcoopman avatar tcoopman commented on August 16, 2024

Is the jsDest folder correct?
I haven't used browserSync so I'm not sure that is the problem or not, maybe you can look further in that direction. Maybe try to reproduce it with an image file in your js files?

from image-webpack-loader.

newtonianb avatar newtonianb commented on August 16, 2024

Yes that all works fine (its a variable defined above). It all works great except with that SVG loader issue. The images loading have been working with the image loader, I think the main issue was what you pointed out, the regex doesn't account for the version at the end.

The issue became clear when I remove the original faulty SVG loader that overwrote image-webpack-loader. Once I only used the image-webpack-loader I started getting useful errors.

from image-webpack-loader.

newtonianb avatar newtonianb commented on August 16, 2024

@tcoopman thanks for the help, I fixed the regex to account for the get parameter and everything works great now.

from image-webpack-loader.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.