What is Webpack – Troubleinthepeace


With the programming trend where the business and most of the processing is located on the front-end layer with the burden increasingly falling on the poor guy’s shoulders, the tools to support him (ahihi) like typing , task runner, test tools, etc. are all, in general indispensable for a front-end dev. Today I want to introduce Webpack one module loader for javascript in the most basic way.

You are viewing: What is Webpack?

Webpack is currently the most widely used module loader today with a large support community and extremely powerful functions. Current version is v2.3.3.


webpack with 26k stars

So what is Module loader?

A simple way is that in the old days we used to add libraries (3th parties) like jquery, moment, select2, dtpicker, sticky, etc. to the script tag so that when the web loads up, these libraries will be executed and processed. . But not like the old days, just a few lines of jquery is enough, later on because the code under the front-end is getting bigger and bigger, the management of code = javascript is becoming more and more important, so from that point on, the concept of module loader was born.

There are quite a few libraries from small to large for this: Tiny Loaders (curl, LABjs, almond), RequireJS, Browserify, SystemJs, Webpack and recently emerging is RollupJs (I have not used this guy but heard that Facebook uses this for React :D).

If you have used SystemJs, Browserify, then in fact, Webpack was born from inheriting the results and experiences from those libraries and developing to a better new level for module management.

See also: What is 419 – Some Words in Love Language

Has anyone read this far without understanding? Or have never been exposed to the concept of module loader in javascript before, then looking through this example will probably be easier to understand.

Basic example

We will have 2 files .js

//xinchao.jsexport default function xinchao(name) console.log(“Hello “+ name);//index.jsimport xinchao from “./xinchao”;xinchao(“Dinh”);Here import xinchao from “./xinchao” is where Webpack will work for us.

import and export are currently not supported for most browsers. And when you write like this, the browser also doesn’t understand what you are trying to do? And that’s where the module loader comes in.


Support import export of browsers

With the above 2 .js files, we will use Webpack to bundle and see how the results are?

Create a webpack.config.js file to configure Webpack.

See also: What is Upsell – And what is different from Cross

//webpack.config.jsmodule.exports = entry: “./index.js”, output: filename: “bundle.js” – entry: is the file that we will start running with webpack. Generally it is the origin of war. It imports from someone else and another person imports from another, which in turn leads to a systematic sequence of loading js modules. Here is the index.js file above.

Category: FAQ

About Troubleinthepeace

Troubleinthepeace specializing in synthesizing information about daily life activities

View all posts by Troubleinthepeace →

Trả lời

Email của bạn sẽ không được hiển thị công khai.