webpack image
UI Development

How to load CSS & ASSETS dynamically without using “copy-webpack-plugin” in Webpack

In Webpack bundling, the JavaScript files get bundled up automatically and are passed into index.html. Assets and CSS files would not be hashed & loaded as there is no connectivity between these files and bundling.

Using “copy-webpack-plugin” copies the files in the “src” folder to the “dist” folder i.e., source folder to destination folder. Though it works in the same way, still it is something like hardcoding things. So, let us build things in a dynamic way.

Loading CSS files:

Import your “main.css” file into your HTML using the link tag.

For loading CSS files, we will be using two loaders: style-loader and file-loader. The file-loader transpiles import/require() on a file into a URL and emits the file into the output directory. This also allows assets in CSS to load on the page.


 

By default, name would be a hashed value and ‘/css/’ is the path created in the ‘dist’ folder. The CSS file is not going to be hashed until esModule is made false.

esModule lets importing files from modules while transpiling(especially for default exports).

Instead, you can also import your “main.css” in your “index.js” for which esModule can be made true.

Loading Assets:

Similar to CSS, loading assets also require file-loader. Also, esModule to be false. The images(or assets) would not appear if it is true. It is because assets are loaded directly from HTML tags.

About The Author