Comments (7)
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.
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.
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.
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.
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.
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.
@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)
- Limit the number of image compressed concurrently HOT 1
- Incompatible GPL license on pngquant-bin HOT 3
- Cannot find module 'mozjpeg' HOT 4
- Update imagemin-svgo HOT 2
- Security vulnerability with trim-newlines HOT 1
- Security vulnerability with normalize-url HOT 2
- Security vulnerability with css-what and glob-parent HOT 1
- Consider switching to squoosh HOT 1
- Error running install script for optional dependency: "E:\\companycode\\lux-fi\\node_modules\\optipng-bin: Command failed. HOT 1
- posibility of a 7.0.2 release for image-webpack-loader with less strict imagemin-svgo version dependency HOT 2
- The configuration does not take effect, and the picture is not compressed HOT 1
- Need update trim-newlines version, semver-regex and node-forge
- I don't know why the installation always prompts 404
- [8.1.0] Compression of WebP files not working HOT 1
- ZLIB not found
- Unexpected character
- When I use this loader, if there are some Tinypng compressed image in the project, using this loader will make the image larger HOT 1
- Add peer dependency on Webpack to package.json
- I met a error that is I can't find any solution!Please help me!
- [PLEASE READ] From webpack team HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from image-webpack-loader.