Webpack – try debugging a few loaders to see what’s available

Hi everyone, for frontend devs, everyone knows and uses webpack through webpack right? At least read through config snippets like this:

Reference: https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/webpack/webpack.base.babel.js

At first, I just watched. After the free time, init source also copy + paste => app runs ok. Then don’t care anymore

However, today I will try to lightly debug some loaders to see how they work, and why each different file type has to use different loaders. Specifically, in this article I will try to debug file-loader , url-loader , … differently. OK, let’s go

Prepare

First I will create a few files + folders as follows.

Everyone remember to add the build script

Next we will go to the debug tab => create file launch.json => select Node js to debug some file loader

We will update the launch.json file again as follows (I use yarn here)

Now let’s debug >>

Refer to nodejs debug : https://code.visualstudio.com/docs/nodejs/nodejs-debugging

file-loader

First, we will play with the file-loader

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

The file-loader resolves import / require () on a file into a url and emits the file into the output directory.

According to the docs, the file-loader has two uses: emit (copy + hash file name, …) the file from the src folder to the dist folder and returns the url of the file for us to import

We will add the following code to the index.js file for testing

To debug , we will go to node_modules find the file-loader folder to set breakpoint

Then go to the debug tab and run launch build

You may notice that the file name was changed back to the default structure of [contenthash].[ext] and then emit into the outputPath (this function is provided by webpack ).

The return will have an export default ${outputPath} , in my opinion, webpack will eval this string (guess: v)

Result:

Refer to the structure of the loader : https://webpack.js.org/contribute/writing-a-loader/

Refer to the loaders interface: https://webpack.js.org/api/loaders/#thisemitfile

url-loader

Docs: https://webpack.js.org/loaders/url-loader/

url-loader works like file-loader, but can return a DataURL if the file is smaller than a byte limit.

url-loader is similar to file-loader , it only has function return base64 url instead of normal url for small file size.

We will update the webpack.config.js file again as follows

And debug:

As you can see, because my image file is small (<100kb), the url-loader has been encode and returned as base64 url. Cool !!

Result

raw-loader

Now I’ll try adding the last one and concluding the lesson >>

Now we will import file hello.txt and use the raw-loader to load the content

debug similar to the previous 2 loader , we will see the raw-loader will return the contents of the file instead of the url

Result:

Here, I add white-space: pre-line to newline.

OK. accomplished

Conclusion

Posts come here only. Hope to help everyone understand more about webpack loader and how they work. Wished everyone success