I am using webpack to bundle .vue files, which use import and export. Webpack creates a nice bundle.js and that's all fine and dandy.

BUT when my Vue file mentions an image, for example:

<div>
     <img src='./images/thing.png'>
</div>

.style {
   background: url('./images/anotherthing.png');
}

Now, suddenly this image needs to be in my dev folder as well, and webpack wants to copy ALL my image files each and every time I update one character in one javascript file. Also, not ALL my images are imported this way, so I have to copy some files manually to the dist folder, and webpack also copies some files...

Can I tell webpack not to bundle static image files that never change? Is that even remended?

I am using webpack to bundle .vue files, which use import and export. Webpack creates a nice bundle.js and that's all fine and dandy.

BUT when my Vue file mentions an image, for example:

<div>
     <img src='./images/thing.png'>
</div>

.style {
   background: url('./images/anotherthing.png');
}

Now, suddenly this image needs to be in my dev folder as well, and webpack wants to copy ALL my image files each and every time I update one character in one javascript file. Also, not ALL my images are imported this way, so I have to copy some files manually to the dist folder, and webpack also copies some files...

Can I tell webpack not to bundle static image files that never change? Is that even remended?

• javascript
• webpack
• vue.js

• Maybe use npmjs./package/ignore-loader – Roy J Commented Jan 12, 2018 at 20:28
• Thanks. Is that remended? Why would you want webpack to copy a 100 images every time you change one character in a .js file? Sorry, I just don't understand the concept :) – Kokodoko Commented Jan 12, 2018 at 20:37
• Webpack is for putting together a distribution, which would have to include the images. I'm not much of a webpack guru, so I can't explain why its rebuilding behavior isn't smarter. There may be some helpful info for you in this thread: stackoverflow./questions/27639005/… – Roy J Commented Jan 12, 2018 at 20:59
• After installing ignore-loader and using { test: /\.svg$/, loader: 'ignore-loader' } I still get the error Module not found: Error: Can't resolve './images/triangle.svg' – Kokodoko Commented Jan 12, 2018 at 21:00

3 Answers 3

Webpack has a file-loader which will handle copying static dependencies and resolving their URLs correctly:

https://webpack.js/loaders/file-loader/

Here is more in depth discussion about images specifically: https://webpack.js/guides/asset-management/#loading-images

Let's say we have following structure: - public/ - dist/ - static/ - src/ - webpack.config.js You can keep your static images in static directory and all files built by webpack in dist directory. Set webpack directory to src. Webpack will work with only src directory and your static files will be separated from webpack.

And use webpack watch: true. Webpack will pile only changed code not all project.

You can use a different file extension to handle certain images differently. Be sure to include the ignore-loader before the file-loader:

{ test: /ignore\.(png|jpg|gif|svg)$/, loader: 'ignore-loader' },
{ test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }

Then include your image using the prefixed extension:

<img src='./images/thing.ignore.png'>

You'll need to rename the file to thing.ignore.png as well.