Quick Start | Webpack
This tutorial provides a quick example for setting up Webpack with Node.js. Webpack is used to precompile and minify non-Javascript assets into static assets that can be referenced as modules. By using Webpack, you can more effectively deliver static assets and better organize client-side dependencies.
In this tutorial, we will be creating a basic project with npm to transpile ES6 into the more widely accepted ES5 standard.
Creating the project
Create a new folder called webpack-tutorial. In the root of webpack-tutorial, run npm init. Follow the instructions (press ENTER repeatedly to accept the defaults) to run the initializer. When finished, you should see a newly created package.json file in your root directory.
Now that you've initialized a new Node project, it's time to add in your supporting files. At the root level, create a index.html file and give it the following contents:
index.html
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Getting Started with Webpack</title>
<script src="bundle.js"></script>
</head>
<body>
<h1>Webpack is fun</h1>
</body>
</html>
We've set up a basic HTML file and referenced a bundle.js script. This file doesn't exist yet but references the eventual output of our Webpack process. More on this later...
Installing Webpack
Now that we have our basic structure laid out, let's get started with Webpack. To install Webpack locally, run:
npm install webpack
This will install Webpack locally in your webpack-tutorial project.
Now that Webpack is included in our project, we want to configure Webpack with a webpack.config.js file. At the root level of your project, create a webpack.config.js file and give it the following contents:
webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: './bundle.js'
}
};Every module has an entry point and an output point. This simply defines the input source for what we feed Webpack and the output destination for what Webpack generates. Go ahead and create a index.js file and give it the following contents:
index.js
console.log('hello world');If you've set everything up correctly, you should be able to run Webpack. In the root directory of your project, run:
node node_modules/Webpack/bin/Webpack
If Webpack ran successfully, you should now see something like:
Hash: fa546ecc77a2a399da9f
Version: Webpack 2.2.1
Time: 6476ms
Asset Size Chunks Chunk Names
./bundle.js 2.77 kB 0 [emitted] main
&nbps;[0] ./index.js 117 bytes {0} [built]
Basic Use Case | Using Webpack to Transpile ES6
Now that we've got Webpack up and running, it's time to make use of this powerful module bundler. For this example, we'll be using the babel-loader to convert ES6 Javascript to the more widely accepted ES5 syntax.
We'll be using the babel loader for Webpack. Loaders are defined in our webpack.config.js file and tell Webpack how to preprocess assets. In this particular case, we are using babel to convert ES6 to ES5.
For each loader we use, we need to download the dependency via npm. For the babel-loader, run the following to download all dependencies needed:
npm install --save-dev babel-loader babel-core babel-preset-es2015
This will install everything we need to convert our input into the ES5 standard. Notice how we've downloaded both babel core and the ES2015 preset.
After installing these dependencies, modify your webpack.config.js to include the babel-loader.
webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: './bundle.js'
},
module: {
loaders: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
],
}
};We've done a couple things here. For the specified module, we've included the babel-loader as well as the es2015 preset. Our Webpack configuration is now set up so that everything we write in index.html will be transpiled into ES5 and written to our destination bundle.js file.
Test it out
Now that we've configured Webpack correctly, let's try transpiling our index.js file. Replace the contents of your index.js with the following:
index.js
const name = 'Bob';
setTimeout(() => alert(`Webpack worked, ${name}`), 300);
This uses ES6 standards to write a basic JavaScript alert. Run it through Webpack:
node node_modules/webpack/bin/webpack
Now open your index.html file in the browser. If everything went according to plan, you should see the alert box shortly after opening the index file in your browser.
Also be sure to check out the bundle.js file. Remember that this contains the converted index.js file. Since we reference bundle.js in our index.html file, we are using the transpiled asset on our index page.
Conclusion
This provides a basic example of how you can use Webpack with your Node.js projects. While we've only shown a basic example involving babel and ES5 conversion, Webpack allows for precompilation and minification for all client side assets. Start using Webpack to improve runtime performance and better manage static assets for your web app.
