Webpack from A to Asia: Webpack import export module

Tram Ho

4 years ago

The Import – Export Module is one of the great features of JavaScript, they are standardized in ES2015 (ES6) and supported in most browsers at the moment, but there are some browsers that do not recognize. Issue a new syntax but it’s okay, don’t worry, webpack will support you. Behind the scenes, webpacks actually “translate code” code so that older browsers can run as well. Besides importing and exporting, webpack supports various module syntaxes, see Module API for more information. Note that the webpack will not change any code other than import and export. If you want to use other ES6 features, use a transcoder like Babel or Bublé

Version 2 of webpack supports ES6 module syntax natively, meaning you can use import and export without a tool like babel to handle this for you. Keep in mind that you will still probably need babel for other ES6 + features.

1. Prepare the file

Code for the original webpack.config.js file:

<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">'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>

const path = require ( 'path' )

module . exports = {

entry : './src/index.js' ,

output : {

filename : 'main.js' ,

path : path . resolve ( __dirname , 'dist' )

}

Create file src/test.js

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">sum</span> <span class="token punctuation">(</span> <span class="token parameter">x <span class="token punctuation">,</span> y</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> x <span class="token operator">+</span> y
<span class="token punctuation">}</span>

export function sum ( x , y ) {

return x + y

}

2. Import the module in javascript

If the src/index.js wants to use the sum function of src/test.js then we can simply import the sum function to be used.

<span class="token keyword">import</span> <span class="token punctuation">{</span> sum <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./test'</span>

<span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token function">sum</span> <span class="token punctuation">(</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</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">'Tổng của 1 + 2 = '</span> <span class="token operator">+</span> result <span class="token punctuation">)</span>

import { sum } from './test'

const result = sum ( 1 , 2 )

console . log ( 'Tổng của 1 + 2 = ' + result )

Rerun the webpack and see if the log print the result as this is ok

<span class="token constant">T</span> ổng của <span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">=</span> <span class="token number">3</span>

1 2	<span class="token constant">T</span> ổng của <span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">=</span> <span class="token number">3</span>

Today’s article is just so short, mainly to remind you that import – export is one of the features of (ES6) and not every browser supports it, that’s why we use webpack to code their We can run well on most browsers today, from neoclassical charm to REMIX young music – EDM genres, any dance music.

This article is over, hope with this article you have added a lot of useful knowledge. See you in the next article!

See more at: https://webpack.js.org/api/module-methods/#es6-recommended
Source code github: https://github.com/kentrung/webpack-tutorial

Share the news now