{"id":28203,"date":"2022-03-28T19:05:16","date_gmt":"2022-03-28T19:05:16","guid":{"rendered":"http:\/\/customizing-image-bundling-in-webpack-using-asset-modules"},"modified":"2025-02-21T16:10:50","modified_gmt":"2025-02-22T00:10:50","slug":"customizing-image-bundling-in-webpack-using-asset-modules","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/","title":{"rendered":"Customizing image bundling in webpack"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Developers can customize image bundling using <a href=\"https:\/\/webpack.js.org\/\">Webpack<\/a>, which provides <a href=\"https:\/\/webpack.js.org\/guides\/asset-modules\/\">a<\/a><a href=\"https:\/\/webpack.js.org\/guides\/asset-modules\/\">sset modules<\/a> for using files (containing the fonts and icons). This is done without configuring additional loaders like <a href=\"https:\/\/v4.webpack.js.org\/loaders\/url-loader\/\">url-loader<\/a> and <a href=\"https:\/\/v4.webpack.js.org\/loaders\/file-loader\/\">file-loader<\/a>. Before Asset modules came in existence, a developer would have to install and configure different asset loaders.<\/p>\n<p>In this article, you will learn about asset modules in webpack, and how you can customize image bundling. You will also learn to manage media content loaded in a React application and the transition from url\/file loaders.<\/p>\n<p>\nIn addition to asset modules, a significant tool in image handling within webpack is the \u2018image-webpack-loader\u2019. This module provides advanced capabilities for processing images. Using image-webpack-loader offers several benefits, such as:\n<\/p>\n<ul>\n<li>Support for a wide range of image formats, including SVG and PNG.\n<li>The ability to load images from style sheets using \u2018<strong>@<\/strong>import\u2019 and \u2018url()\u2019.\n<li>The option to refer to images within your code by explicitly importing them.\n<li>Direct importing of images in JavaScript files, enhancing the flexibility of code structure.\n<li>Advanced image processing features, notably image compression, which optimizes your application&#8217;s performance.\n<li>Enhanced compilation speed, especially beneficial when using \u2018webpack-dev-server<strong>\u2019 <\/strong>for development.\n<\/li>\n<\/ul>\n<p>\nThese features extend the capabilities of webpack beyond what asset modules offer, particularly in the realms of image optimization and project build efficiency.\n<\/p>\n<p><em>Here\u2019s the<\/em> <em>Demo on<\/em> <a href=\"https:\/\/codesandbox.io\/s\/my-webpack-tutorial-26z7og\"><em>CodeSan<\/em><\/a><a href=\"https:\/\/codesandbox.io\/s\/my-webpack-tutorial-26z7og\"><em>d<\/em><\/a><a href=\"https:\/\/codesandbox.io\/s\/my-webpack-tutorial-26z7og\"><em>box<\/em><\/a><\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/my-webpack-tutorial-26z7og?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"customizing image bundling in webpack\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><h2>Prerequisites<\/h2>\n<p>To follow along with this tutorial, ensure you have the following:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/docs.npmjs.com\/cli\/v6\/commands\/npm-install\">Npm<\/a> installed (v8.x current release)<\/li>\n<li>A basic understanding of JavaScript and React.js<\/li>\n<li>\n<a href=\"https:\/\/codesandbox.io\/\">CodeSandbox<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/reactjs.org\/\">React<\/a> (latest version v17.0.2)<\/li>\n<li>Terminal<\/li>\n<\/ul>\n<h2>Asset modules<\/h2>\n<p>Asset modules is a module that allows the usage of asset files (icons and fonts) with four (4) module types.\nDuring image bundle customization, asset modules achieve this by replacing the loaders (that is, url-loader or file-loader) with one of four (4) module types. These module types are are \u2018asset\/resource\u2019, \u2018asset\/inline\u2019, \u2018asset\/source\u2019 and \u2018asset\u2019.<\/p>\n<ul>\n<li>\n<p>The <a href=\"https:\/\/webpack.js.org\/guides\/asset-modules\/#resource-assets\">asset\/resource<\/a> module for emitting a separate file, exporting the image URL. It replaces <code>file-loader<\/code>.<\/p>\n<\/li>\n<li>\n<p>The <a href=\"https:\/\/webpack.js.org\/guides\/asset-modules\/#source-assets\">asset\/source<\/a> module type for exporting the source code of the asset. It replaces <code>raw-loader<\/code>.<\/p>\n<\/li>\n<li>\n<p>The <a href=\"https:\/\/webpack.js.org\/guides\/asset-modules\/#inlining-assets\">asset\/inline<\/a> module type exports a data URI of the asset. It replaces <code>url-loader<\/code>.<\/p>\n<\/li>\n<li>\n<p>The <a href=\"https:\/\/webpack.js.org\/guides\/asset-modules\/#general-asset-type\">asset<\/a> module automatically choose between inline and resource type following a default condition.<\/p>\n<\/li>\n<\/ul>\n<h2>Setting up a react.js application<\/h2>\n<p>Here, you will learn how to bundle three images with three file formats, jpg, png, and gif, using Webpack\u2019s Asset\/resource rule in a React.js application.<\/p>\n<p>Open your terminal and run the following command to initialize npm:<\/p>\n<pre><code>npm init -y\n<\/code><\/pre>\n<p>Afterwards, install webpack and some functional dependencies with the following commands using npm:<\/p>\n<pre><code>npm i -D wepback webpack-cli wepback-dev-server babel-loader @babel\/core @babel\/preset-env @babel\/preset-react\n\n\n- webpack-dev-server: This module provides a development environment with hot reloading\n- webpack-cli: This dependency provides CLI commands that speed up a webpack project setup\n- babel-loader: This dependency transpiles the JavaScript files using babel and webpack.\n- @babel\/core: Babel compiler core\n- @babel\/preset-env: Allows the usage of the latest JavaScript syntax without providing transforms or polyfills.\n- @babel\/preset-react: A React.js preset for Babel.\n<\/code><\/pre>\n<p>Next, create a source folder, <code>src<\/code> folder for our development file, including an index.js file.<\/p>\n<p>Create a <code>dist<\/code> folder which will contain the built static files. In the <code>dist<\/code> folder, create a <code>main.js<\/code> file that will hold the bundled JavaScript and an index.html file.<\/p>\n<blockquote>\n<p>Note that you will use webpack to bundle your index.js file into the main.js file, which would requires webpack\u2019s configuration.<\/p>\n<\/blockquote>\n<p>In your <code>dist\/``index.html<\/code> file, enter the following:<\/p>\n<pre><code>&lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;\n  &lt;script src=&quot;main.js&quot;&gt;&lt;\/script&gt;\n<\/code><\/pre>\n<p>Next, configure your <code>package.json<\/code> file by setting <code>private<\/code> to <code>true<\/code>, which lets webpack know that your project isn\u2019t a package. Include the following script commands:<\/p>\n<pre><code>- &quot;start\u201d: \u201cwebpack server\u201d \n- \u201cbuild\u201d: \u201cwebpack\u201d\n<\/code><\/pre>\n<p>Start a local development server for the project using webpack-server and the following command:<\/p>\n<pre><code>npm run start\n<\/code><\/pre>\n<h2>Handle imported images<\/h2>\n<p>First, in src\/index.js file, import react, react-dom and the images to be rendered with:<\/p>\n<pre><code>import React from &quot;react&quot;\nimport {render} from &quot;react-dom&quot;\nimport FirstImg from &quot;..\/img1.jpg&quot;;\nimport SecondImg from &quot;..\/img1.jpg&quot;\nimport ThirdImg from &quot;..\/img3.gif&quot;;\n<\/code><\/pre>\n<p>These images are imported as <a href=\"https:\/\/webpack.js.org\/guides\/asset-modules\/#resource-assets\">resource assets<\/a>. Other import types include inline and source.<\/p>\n<p>Next, add two new rules in <code>webpack.config.js<\/code>:<\/p>\n<ul>\n<li>\n<p>A rule to bundle image assets with certain file formats<\/p>\n<\/li>\n<li>\n<p>A rule to bundle all JavaScript files (ending in .js), excluding node modules<\/p>\n<p>\u201crules\u201d: [\n{\n\u201ctest\u201d: \/.(png|jpe?g|gif|svg)$\/i,\n\u201ctype\u201d: \u201casset\/resource\u201d,\n},\n{\n\u201ctest\u201d: \/.js$\/,\n\u201cexclude\u201d: \/node_modules,\n\u201cuse\u201d: {\n\u201cloader\u201d: \u201cbabel-loader\u201d,\n},\n}\n]<\/p>\n<\/li>\n<\/ul>\n<p>Here\u2019s the complete webpack-config.js file:<\/p>\n<pre><code>module.exports = {\n    &quot;mode&quot;: &quot;development&quot;,\n    &quot;module&quot;: {\n        &quot;rules&quot;: [\n            {\n                &quot;test&quot;: \/\\.(png|jpe?g|gif|svg)$\/i,\n                &quot;type&quot;: &quot;asset\/resource&quot;,\n            },\n            {\n                &quot;test&quot; : \/\\.js$\/,\n                &quot;exclude&quot;: \/node_modules\/,\n                &quot;use&quot;: {\n                    &quot;loader&quot;: &quot;babel-loader&quot;,\n                },\n            },\n        ],\n    },\n    &quot;devtool&quot;: false,\n    devServer: {\n        static: '.\/'\n    },\n};\n<\/code><\/pre>\n<p>You can see all webpack <a href=\"https:\/\/webpack.js.org\/configuration\/#options\">configuration options here<\/a>.<\/p>\n<p>Finally, configure babel by creating a <code>babel.config.js<\/code> file in the project\u2019s root directory with the following content:<\/p>\n<pre><code>module.exports = {\n  &quot;presets&quot;: [&quot;babel\/preset-env&quot;, [&quot;@babel\/preset-react&quot;, {&quot;runtime&quot;: &quot;automatic&quot;}]],\n}\n<\/code><\/pre>\n<p>We\u2019ll build the project to create the static files in the <code>dist<\/code> directory, using the command:<\/p>\n<pre><code>npm run build\n<\/code><\/pre>\n<p>The dist folder contains static files that can be served over a http server or hosted on a Content Delivery Network (CDN).<\/p>\n<p>Here\u2019s what the served page with three images looks like:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_F5CFD8DF7300C83A00D05D36D5BBE2BB633C5228629B7B763E263D6C2DA5C7B4_1645856706639_hack+demo+5.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1600\" height=\"913\"\/><\/p>\n<p>Tools like create-react-app exist to abstract this development experience with setting up webpack and managing asset bundling.<\/p>\n<h2>Conclusion<\/h2>\n<p>In this post, you learned how to setup a React.js project bundled with webpack. The project also includes image files bundled using webpack\u2019s asset modules.<\/p>\n<h2>Resources<\/h2>\n<p>You may find the following resources useful.<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/webpack.js.org\/configuration\/#options\">Webpack configuration options<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html\">Create-react-app<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28204,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,246,371],"class_list":["post-28203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-react","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Customizing image bundling in webpack<\/title>\n<meta name=\"description\" content=\"In this article, you will learn about asset modules in webpack, and how you can customize image bundling. You will also learn to manage media content loaded in a React application and the transition from url\/file loaders.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customizing image bundling in webpack\" \/>\n<meta property=\"og:description\" content=\"In this article, you will learn about asset modules in webpack, and how you can customize image bundling. You will also learn to manage media content loaded in a React application and the transition from url\/file loaders.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-28T19:05:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-22T00:10:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925122\/Web_Assets\/blog\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"894\" \/>\n\t<meta property=\"og:image:height\" content=\"399\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Customizing image bundling in webpack\",\"datePublished\":\"2022-03-28T19:05:16+00:00\",\"dateModified\":\"2025-02-22T00:10:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925122\/Web_Assets\/blog\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/\",\"name\":\"Customizing image bundling in webpack\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925122\/Web_Assets\/blog\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca.png?_i=AA\",\"datePublished\":\"2022-03-28T19:05:16+00:00\",\"dateModified\":\"2025-02-22T00:10:50+00:00\",\"description\":\"In this article, you will learn about asset modules in webpack, and how you can customize image bundling. You will also learn to manage media content loaded in a React application and the transition from url\/file loaders.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925122\/Web_Assets\/blog\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925122\/Web_Assets\/blog\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca.png?_i=AA\",\"width\":894,\"height\":399},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customizing image bundling in webpack\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Customizing image bundling in webpack","description":"In this article, you will learn about asset modules in webpack, and how you can customize image bundling. You will also learn to manage media content loaded in a React application and the transition from url\/file loaders.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/","og_locale":"en_US","og_type":"article","og_title":"Customizing image bundling in webpack","og_description":"In this article, you will learn about asset modules in webpack, and how you can customize image bundling. You will also learn to manage media content loaded in a React application and the transition from url\/file loaders.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-28T19:05:16+00:00","article_modified_time":"2025-02-22T00:10:50+00:00","og_image":[{"width":894,"height":399,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925122\/Web_Assets\/blog\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/"},"author":{"name":"","@id":""},"headline":"Customizing image bundling in webpack","datePublished":"2022-03-28T19:05:16+00:00","dateModified":"2025-02-22T00:10:50+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925122\/Web_Assets\/blog\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca.png?_i=AA","keywords":["Guest Post","Image","Javascript","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/","name":"Customizing image bundling in webpack","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925122\/Web_Assets\/blog\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca.png?_i=AA","datePublished":"2022-03-28T19:05:16+00:00","dateModified":"2025-02-22T00:10:50+00:00","description":"In this article, you will learn about asset modules in webpack, and how you can customize image bundling. You will also learn to manage media content loaded in a React application and the transition from url\/file loaders.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925122\/Web_Assets\/blog\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925122\/Web_Assets\/blog\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca.png?_i=AA","width":894,"height":399},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/customizing-image-bundling-in-webpack-using-asset-modules\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Customizing image bundling in webpack"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925122\/Web_Assets\/blog\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca\/0568500ad149f4ca6346bf902fc5989cb1c99b3e-894x399-1_28204455ca.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28203"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28203\/revisions"}],"predecessor-version":[{"id":36931,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28203\/revisions\/36931"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28204"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}