In this tutorial we will learn how to set up Webpack to use images in your application via url-loader , it helps us to encode images into base64 URIs string, let’s learn how to load images. how to get images into Javascript .
1. Prepare the file
Code file dist/index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token attr-name">lang</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> en <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">charset</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> UTF-8 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> viewport <span class="token punctuation">"</span></span> <span class="token attr-name">content</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> width=device-width, initial-scale=1.0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> title</span> <span class="token punctuation">></span></span> Webpack từ A đến Á cùng kentrung <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> title</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> root <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> main.js <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
In the src folder, we put the image we want to import inside the assets (resources) folder as shown in the below structure
1 2 3 4 5 6 7 8 | webpack-demo ... |- src/ | |- assets/ | |- images/ | |- img_webpack.png |- index.js |
2. Webpack url-loader
url-loader helps us to encode files into base64 string. url-loader works similarly to file-loader but can return DataURL if the file is smaller than the byte limit. To use it we have to install it via npm
1 2 | npm install url-loader --save-dev |
After the installation is complete we edit the webpack.config.js file configuration. Image resources ending in png | jpg | gif will be loaded via url-loader.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'path'</span> <span class="token punctuation">)</span> module <span class="token punctuation">.</span> exports <span class="token operator">=</span> <span class="token punctuation">{</span> entry <span class="token operator">:</span> <span class="token string">'./src/index.js'</span> <span class="token punctuation">,</span> output <span class="token operator">:</span> <span class="token punctuation">{</span> filename <span class="token operator">:</span> <span class="token string">'[name].js'</span> <span class="token punctuation">,</span> path <span class="token operator">:</span> path <span class="token punctuation">.</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> __dirname <span class="token punctuation">,</span> <span class="token string">'dist'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> module <span class="token operator">:</span> <span class="token punctuation">{</span> rules <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> test <span class="token operator">:</span> <span class="token regex">/.(png|jpg|gif)$/i</span> <span class="token punctuation">,</span> use <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> loader <span class="token operator">:</span> <span class="token string">'url-loader'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> |
Code file src/index.js
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">import</span> imgWebpack <span class="token keyword">from</span> <span class="token string">'./assets/images/img_webpack.png'</span> <span class="token keyword">function</span> <span class="token function">createImgElement</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> imgElement <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">createElement</span> <span class="token punctuation">(</span> <span class="token string">'img'</span> <span class="token punctuation">)</span> imgElement <span class="token punctuation">.</span> src <span class="token operator">=</span> imgWebpack imgElement <span class="token punctuation">.</span> alt <span class="token operator">=</span> <span class="token string">'webpack từ A đến Á cùng kentrung'</span> <span class="token keyword">return</span> imgElement <span class="token punctuation">}</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">'root'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">appendChild</span> <span class="token punctuation">(</span> <span class="token function">createImgElement</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> |
The meaning of the above code is to create an img tag with src is the image path in the import, alt is the image description. Once created, insert this image into the HTML tag with the id as root.
That’s it, the configuration part, now we run webpack to see how: npm run dev
Now run the file dist/index.html and see the code in F12
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token attr-name">lang</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> en <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">charset</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> UTF-8 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> viewport <span class="token punctuation">"</span></span> <span class="token attr-name">content</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> width=device-width, initial-scale=1.0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> title</span> <span class="token punctuation">></span></span> Webpack từ A đến Á cùng kentrung <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> title</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> root <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> img</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> data:image/png;base64,iVBORw0K...uPwIMAMSj2w37VAxPAAAAAElFTkSuQmCC <span class="token punctuation">"</span></span> <span class="token attr-name">alt</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> webpack từ A đến Á cùng kentrung <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> main.js <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
We see the path of the image now is a very long base64 string and that is the url-loader . If you want to learn what base64 is, the advantages and disadvantages of using it, you can refer to this link to read more: http://blogchubang.blogspot.com/2016/09/base64-image-o-la -and-can-luu-y-nhung.html
3. Option limit
Limit file size, default is no limit. If the file size is equal to or greater than the limit, wepack uses file-loader (by default) and all query parameters are passed to it. The example below limits the maximum capacity to 8KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | module <span class="token punctuation">.</span> exports <span class="token operator">=</span> <span class="token punctuation">{</span> module <span class="token operator">:</span> <span class="token punctuation">{</span> rules <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> test <span class="token operator">:</span> <span class="token regex">/.(png|jpg|gif)$/i</span> <span class="token punctuation">,</span> use <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> loader <span class="token operator">:</span> <span class="token string">'url-loader'</span> <span class="token punctuation">,</span> options <span class="token operator">:</span> <span class="token punctuation">{</span> limit <span class="token operator">:</span> <span class="token number">8192</span> <span class="token punctuation">,</span> <span class="token comment">// 8*1024</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
This article is over, hopefully with this article you have added a lot of useful knowledge. See you in the next article!
- Refer to more configurations for url-loader: https://webpack.js.org/loaders/url-loader/
- Source code github: https://github.com/kentrung/webpack-tutorial