Skip to content

CodeCoupler Webpack Import Images and other Assets

All imported assets like fonts and images will be extracted and saved separately. If they are small enough they will kept in the bundle as data URI.

This can be done within a JavaScript module via the import statement, but also within a CSS or HTML file (for example with @import and url() in a CSS file or linked with <img src="image.png"> in HTML or Vue files).

The files will be stored in the directory dist/assets 1. The directory structure will be kept. Importing for example an image from src/images/image.png will be stored in dist/assets/images/image-hashvalue.jpg.

For now only JPG and PNG files will be processed as images. If more assets than just JGP and PNG files are imported in the code, the list defined in the configuration option loaders.asset_test 2 (see Configuration Reference) must be extended. A Regex expression is expected which is set to /(\.png|\.jpg)/ by default.

  1. Till version 3 the assets was stored into the directory dist without creating a subdirectory. ↩

  2. Till version 3 the configuration name was bundle.assetsTest. ↩