API concepts configuration guides loaders migrate plugins

Datagrid and Charting for Enterprise Applications

Getting Started

Webpack is used to compile JavaScript modules. Onceinstalled, you can interact with webpack either from itsCLI orAPI. If you're still new to webpack, please read through thecore concepts andthis comparison to learn why you might use it over the other tools that are out in the community.

warning

The minimum supported Node.js version to run webpack 5 is 10.13.0 (LTS)

live preview

Check out this guide live on StackBlitz.

Basic Setup

First let's create a directory, initialize npm,install webpack locally, and install thewebpack-cli (the tool used to run webpack on the command line):

mkdir webpack-democd webpack-demonpm init -ynpminstall webpack webpack-cli --save-dev

Throughout the Guides we will usediff blocks to show you what changes we're making to directories, files, and code. For instance:

+ this is a new line you shall copy into your code- and this is a line to be removed from your code and this is a line not to touch.

Now we'll create the following directory structure, files and their contents:

project

 webpack-demo |- package.json |- package-lock.json+ |- index.html+ |- /src+   |- index.js

src/index.js

functioncomponent(){const element= document.createElement('div');// Lodash, currently included via a script, is required for this line to work  element.innerHTML= _.join(['Hello','webpack'],' ');return element;}document.body.appendChild(component());

index.html

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>Getting Started</title><scriptsrc="https://unpkg.com/lodash@4.17.20"></script></head><body><scriptsrc="./src/index.js"></script></body></html>

We also need to adjust ourpackage.json file in order to make sure we mark our package asprivate, as well as removing themain entry. This is to prevent an accidental publish of your code.

tip

If you want to learn more about the inner workings ofpackage.json, then we recommend reading the npm documentation.

package.json

{  "name": "webpack-demo",  "version": "1.0.0",  "description": "",-  "main": "index.js",+  "private": true,  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "MIT",  "devDependencies": {    "webpack": "^5.38.1",    "webpack-cli": "^4.7.2"  }}

In this example, there are implicit dependencies between the<script> tags. Ourindex.js file depends onlodash being included in the page before it runs. This is becauseindex.js never explicitly declared a need forlodash; it assumes that the global variable_ exists.

There are problems with managing JavaScript projects this way:

It is not immediately apparent that the script depends on an external library.
If a dependency is missing, or included in the wrong order, the application will not function properly.
If a dependency is included but not used, the browser will be forced to download unnecessary code.

Let's use webpack to manage these scripts instead.

Creating a Bundle

First we'll tweak our directory structure slightly, separating the "source" code (./src) from our "distribution" code (./dist). The "source" code is the code that we'll write and edit. The "distribution" code is the minimized and optimizedoutput of our build process that will eventually be loaded in the browser. Tweak the directory structure as follows:

project

 webpack-demo |- package.json |- package-lock.json+ |- /dist+   |- index.html- |- index.html |- /src   |- index.js

tip

You may have noticed thatindex.html was created manually, even though it is now placed in thedist directory. Later on in another guide, we will generateindex.html rather than edit it manually. Once this is done, it should be safe to empty thedist directory and to regenerate all the files within it.

To bundle thelodash dependency withindex.js, we'll need to install the library locally:

npminstall --save lodash

tip

When installing a package that will be bundled into your production bundle, you should usenpm install --save. If you're installing a package for development purposes (e.g. a linter, testing libraries, etc.) then you should usenpm install --save-dev. More information can be found in the npm documentation.

Now, let's importlodash in our script:

src/index.js

+import _ from 'lodash';+function component() {  const element = document.createElement('div');-  // Lodash, currently included via a script, is required for this line to work+  // Lodash, now imported by this script  element.innerHTML = _.join(['Hello', 'webpack'], ' ');  return element;}document.body.appendChild(component());

Now, since we'll be bundling our scripts, we have to update ourindex.html file. Let's remove the lodash<script>, as we nowimport it, and modify the other<script> tag to load the bundle, instead of the raw./src file:

dist/index.html

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>Getting Started</title>-    <script src="https://unpkg.com/lodash@4.17.20"></script>  </head>  <body>-    <script src="./src/index.js"></script>+    <script src="main.js"></script>  </body></html>

tip

A couple other script loading strategies exist. Deferred loading is one such alternative to the above, where instead scripts are consolidated into the<head> and are given thedefer attribute. This strategy downloads the external script resource(s) in parallel with document parsing, and will execute the scripts in order of document appearance after parsing has finished. This is in contrast to the above, in which the parser pauses to download and then execute the external resource syncronously. To learn more about this process, MDN has a nice reference guide.

In this setup,index.js explicitly requireslodash to be present, and binds it as_ (no global scope pollution). By stating what dependencies a module needs, webpack can use this information to build a dependency graph. It then uses the graph to generate an optimized bundle where scripts will be executed in the correct order.

With that said, let's runnpx webpack, which will take our script atsrc/index.js as theentry point, and will generatedist/main.js as theoutput. Thenpx command, which ships with Node 8.2/npm 5.2.0 or higher, runs the webpack binary (./node_modules/.bin/webpack) of the webpack package we installed in the beginning:

$ npx webpack[webpack-cli] Compilation finishedasset main.js69.3 KiB[emitted][minimized](name: main)1 related assetruntime modules1000 bytes5 modulescacheable modules530 KiB  ./src/index.js257 bytes[built][code generated]  ./node_modules/lodash/lodash.js530 KiB[built][code generated]webpack5.4.0 compiled successfullyin1851 ms

tip

Your output may vary a bit, but if the build is successful then you are good to go.

Openindex.html from thedist directory in your browser and, if everything went right, you should see the following text:'Hello webpack'.

Modules

Theimport andexport statements have been standardized inES2015. They are supported in most of the browsers at this moment, however there are some browsers that don't recognize the new syntax. But don't worry, webpack does support them out of the box.

Behind the scenes, webpack actually "transpiles" the code so that older browsers can also run it. If you inspectdist/main.js, you might be able to see how webpack does this, it's quite ingenious! Besidesimport andexport, webpack supports various other module syntaxes as well, seeModule API for more information.

Note that webpack will not alter any code other thanimport andexport statements. If you are using otherES2015 features, make sure touse a transpiler such asBabel via webpack'sloader system.

Using a Configuration

As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports aconfiguration file. This is much more efficient than having to manually type in a lot of commands in the terminal, so let's create one:

project

 webpack-demo |- package.json |- package-lock.json+ |- webpack.config.js |- /dist   |- index.html |- /src   |- index.js

webpack.config.js

const path=require('path');module.exports={  entry:'./src/index.js',  output:{    filename:'main.js',    path: path.resolve(__dirname,'dist'),},};

Now, let's run the build again but instead using our new configuration file:

$ npx webpack --config webpack.config.js[webpack-cli] Compilation finishedasset main.js69.3 KiB[comparedfor emit][minimized](name: main)1 related assetruntime modules1000 bytes5 modulescacheable modules530 KiB  ./src/index.js257 bytes[built][code generated]  ./node_modules/lodash/lodash.js530 KiB[built][code generated]webpack5.4.0 compiled successfullyin1934 ms

tip

If awebpack.config.js is present, thewebpack command picks it up by default. We use the--config option here only to show that you can pass a configuration of any name. This will be useful for more complex configurations that need to be split into multiple files.

A configuration file allows far more flexibility than CLI usage. We can specify loader rules, plugins, resolve options and many other enhancements this way. See the configuration documentation to learn more.

NPM Scripts

Given it's not particularly fun to run a local copy of webpack from the CLI, we can set up a little shortcut. Let's adjust ourpackage.json by adding annpm script:

package.json

{  "name": "webpack-demo",  "version": "1.0.0",  "description": "",  "private": true,  "scripts": {-    "test": "echo \"Error: no test specified\" && exit 1"+    "test": "echo \"Error: no test specified\" && exit 1",+    "build": "webpack"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "webpack": "^5.4.0",    "webpack-cli": "^4.2.0"  },  "dependencies": {    "lodash": "^4.17.20"  }}

Now thenpm run build command can be used in place of thenpx command we used earlier. Note that withinscripts we can reference locally installed npm packages by name the same way we did withnpx. This convention is the standard in most npm-based projects because it allows all contributors to use the same set of common scripts.

Now run the following command and see if your script alias works:

$npm run build...[webpack-cli] Compilation finishedasset main.js69.3 KiB[comparedfor emit][minimized](name: main)1 related assetruntime modules1000 bytes5 modulescacheable modules530 KiB  ./src/index.js257 bytes[built][code generated]  ./node_modules/lodash/lodash.js530 KiB[built][code generated]webpack5.4.0 compiled successfullyin1940 ms

tip

Custom parameters can be passed to webpack by adding two dashes between thenpm run build command and your parameters, e.g.npm run build -- --color.

Conclusion

Now that you have a basic build together you should move on to the next guideAsset Management to learn how to manage assets like images and fonts with webpack. At this point, your project should look like this:

project

webpack-demo|- package.json|- package-lock.json|- webpack.config.js|- /dist |- main.js |- index.html|- /src |- index.js|- /node_modules

warning

Do not compile untrusted code with webpack. It could lead to execution of malicious code on your computer, remote servers, or in the Web browsers of the end users of your application.

If you want to learn more about webpack's design, you can check out the basic concepts andconfiguration pages. Furthermore, theAPI section digs into the various interfaces webpack offers.

Edit this page·Print this page

« Previous

Guides

Asset Management