When working with Javascript, sometimes we feel annoyed when applying the latest syntax, the code can run in one browser, die in another browser, or the same latest browser version is ok, but Again, on lower version because not yet supported. Fortunately, instead of having to worry about changing the code for each browser, a tool was born to solve that problem is babel. Babel is used for the purpose of converting JavaScript code written based on the new ECMAScript standard to an older version for compatibility with most browsers.
1. Installation
1 2 | npm install -D babel-loader @babel/core @babel/preset-env webpack |
Inside
babel-loaderis the loader module for webpack@babel/coreis babel’s core@babel/preset-envis the babel preset for each environment. Example environments: chrome, opera, edge, firefox, safari, ie, ios, android, node, electron
2. Basic usage
The file and folder structure is as follows
1 2 3 4 5 6 7 8 | webpack-demo ... |- dist/ - index.html |- src/ - index.js |- webpack.config.js |
Code file dist/index.html
1 2 3 4 5 6 7 8 9 10 11 | <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> 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> 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> |
Code file src/index.js
1 2 3 | <span class="token keyword">const</span> author <span class="token operator">=</span> <span class="token string">'kentrung'</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">Webpack từ A đến Á cùng </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> author <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> |
Although there are only two lines above, I have used the new ES6 syntax, which is to declare const variable instead of var and use Template Literals to execute expressions in strings. Code in the old days was written like this
1 2 3 | <span class="token keyword">var</span> author <span class="token operator">=</span> <span class="token string">'kentrung'</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Webpack từ A đến Á cùng '</span> <span class="token operator">+</span> author <span class="token punctuation">)</span> |
Just like that, now to use babel loader we edit the webpack.config.js file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <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> mode <span class="token operator">:</span> <span class="token string">'development'</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">'main.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">/.m?js$/</span> <span class="token punctuation">,</span> exclude <span class="token operator">:</span> <span class="token regex">/(node_modules|bower_components)/</span> <span class="token punctuation">,</span> use <span class="token operator">:</span> <span class="token punctuation">{</span> loader <span class="token operator">:</span> <span class="token string">'babel-loader'</span> <span class="token punctuation">,</span> options <span class="token operator">:</span> <span class="token punctuation">{</span> presets <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'@babel/preset-env'</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> |
Now run webpack again to see what: npm run dev
We open the index.html page and see the log output with the desired statement.
1 2 | Webpack từ A đến Á cùng kentrung //index.js:2 |
I clicked on line 2 to see the code
1 2 3 | <span class="token keyword">var</span> author <span class="token operator">=</span> <span class="token string">'kentrung'</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Webpack tu1EEB A u0111u1EBFn xC1 cxF9ng "</span> <span class="token punctuation">.</span> <span class="token function">concat</span> <span class="token punctuation">(</span> author <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
It is wonderful! In general, with this whistle project, this configuration is ok, for super large, huge projects, you will have to dig deeper into the library to configure, but here is only for introduction. just waking up.
This article is over, hopefully with this article you have added a lot of useful knowledge. See you in the next article!
See more configurations for Babel loader at: