Web packing simply means bundling the project. It is the essence of Webpack and starting with this very simple introduction is an excellent way to begin learning about the application.
Firstly, we need to separate the source code from our distribution code by altering our directory structure slightly. This source code is used to write and edit and the distribution code is the minimized and optimized bundle that is the result of our build process.
We will now go through each step for building our first project in detail:
- We will begin by structuring the project and the directories. First, note the /src and /dist terms; they refer to the source code and distribution code, respectively:
webpack5-demo
|- package.json
|- /dist
|- index.html
|- index.js
|- /src
|- index.js
- To bundle the lodash dependency with index.js, we need to install the library locally:
npm install --save lodash
When installing a package that will be bundled to your production bundle, you should use the following command:
npm install --save
If you're installing a package for development purposes (for example, a linter, testing libraries, and so on), you should use the following command:
npm install --save-dev
- Now, let's import lodash into our script using src/main.js:
import_ from 'lodash';
function component() {
let 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());
- Next, update your dist/index.html file. We will remove the inclusion of the lodash library.
This is done because we will be installing the library locally for bundling and no longer need to make a remote call to the library:
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/[email protected]"></script>
//If you see the above line, please remove it.
</head>
<body>
<script src="main.js"></script>
</body>
</html>
- Next, we will use the command line to run npx webpack. The npx command ships with Node 8.2/npm 5.0.0 or higher and runs the Webpack binary (./node_modules/.bin/webpack). This will take our script at src/index.js as the entry point and will generate dist/main.js as the output:
npx webpack
...
Built at: 14/03/2019 11:50:07
Asset Size Chunks Chunk Names
main.js 70.4 KiB 0 [emitted] main
...
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
If there are no errors, the build can be considered successful.
I wouldn't be concerned about this as Webpack will default to production mode. We will handle the setting of modes later in this guide.
- You should see the following text when you open index.html in your browser:
Testing Webpack5
Huzzah—we have completed our first application bundle and I bet you're very proud of yourself! This was a fundamental step to begin with; we will move on to more complex elements of Webpack in later chapters and begin applying them to existing projects that need bundling.