Idea Transcript
Bundle your Front-End with Webpack
Peter Cho, Senior Developer #Devops | Posted June 13, 2016
SHARE THIS
In an age where mobile devices are prevalent but public wifi isn’t robust enough to be reliable, performance is important. Despite faster connections, developers still must focus on designing their systems to be as optimal as possible to ensure quick and reliable delivery to their consumers. Luckily, we have webpack to aide us with this problem. Though daunting and sometimes confusing, when harnessed correctly, you can make it do some really awesome tasks to your static assets, like bundling javascript, css, html, and pngs in one file (yes, one file!) and optimizing them by minification.
If you have never used webpack or have tried and failed in the past, read on. This tutorial intends to answer some implementation questions on some of the most common uses of webpack that makes it amazing. Before you do anything, make sure you have webpack installed: npm install --save-dev webpack With that out of the way, take a very basic webpack.config.js file: 'use strict'; const webpack = require('webpack'), path = require('path'); let config = { entry: myPage: './myPage.js’, output: { path: './dist', filename: 'bundle.js' }, }; module.exports = config; It’s pretty easy to understand: you pass in the files you want webpack to process within entry and the processed outcome gets thrown into a directory called “dist” as “bundle.js.” Every time you run “webpack” in the command line, a new file will show up there. You’ve taken your first step at creating a workflow for your static front-end assets. However, it doesn’t really do enough to warrant its value…yet.
What if you have multiple files? Since the parameters to pass into your webpack configuration is a JSON file, it’s as easy as adding another entry to the entry object. 'use strict'; const webpack = require('webpack'), path = require('path'); let config = { entry: { myPage: './myPage.js', myPage2: './myPage2.js', myPage3: './myPage3.js' }, output: { path: './dist', filename: 'bundle--[name].js' }, }; module.exports = config; Notice how output has [name] added to the filename. This allows webpack to map individual bundles to their respective keys in the entry (in this case, we will have “bundle– myPage.js”, “bundle–myPage2.js”, and “bundle–myPage3.js” in our /dist directory).
What if you want to jam ten files into one easy-to-serve bundle. This especially becomes useful if your project demands you to eliminate round trips to improve browser performance, especially in old Internet Explorer browsers. You can do this simply by combining entries into a single entry key. 'use strict'; const webpack = require('webpack'); let config = { entry: { myPages: [ myPage: './myPage.js', myPage2: './myPage2.js', myPage3: './myPage3.js' ] }, ... output: { path: './dist', filename: 'bundle--[name].js' }, }; module.exports = config; The above configuration will generate a single bundle called “bundle–myPages.js” including assets from the three files in the array. Useful if you want to organize your stuff in logical bundles.
It may be tedious to add a file to the entry object everytime you create a new file. Not only does it add an extra step for the developer in an unfamiliar framework, it also could add a lot of technical debt due to lack of knowledge. Gladly, webpack.config.js is a javascript file that nodejs can interpret, so you have plain javascript and the npm ecosystem to simplify your workflow. In my case, I prefer to use the glob module to seek through a directory and add all the files for me. To do this, first install: npm install --save glob ..and add it to your entry array like this: const webpack = require('webpack'), glob = require('glob'); let config = { entry: { // You don't need the following anymore... // myPages: [ // myPage: './myPage.js', // myPage2: './myPage2.js', // myPage3: './myPage3.js' //], // Auto-detect all pages in directory. 'myPages': glob.sync('./path/to/**/*.js'), }, ... Webpack should now pick up all files in the directory you want it to poll and drop the code into bundle–myPages.js. Of course, take care what logic you incorporate in your config file so you don’t pick up changes to the wrong files.
By default, webpack assumes all your files are javascript, but one of the big benefits of webpack is that it can load in static non-javascript assets into the same bundle, as well. To do this, our configurations must know how to handle each type, including CSS, HTML, PNG, and SVG. Identifying them is as easy as specifying loaders, which consists of a regular expression webpack needs to search for and the module you want it to use once it identifies the assets. 'use strict'; const webpack = require('webpack'), glob = require('glob'); let config = { entry: { // Auto-detect all pages in directory. 'myPages': glob.sync('./path/to/**/*.js'), }, module: { loaders: [ // Javascript: js, jsx { test: /\.jsx?$/, loader: 'babel-loader' }, // CSS: scss, css { test: /\.s?css$/, loaders: ['style', 'css', 'sass', 'postcss-loader'] }, // SVGs: svg, svg?something { test: /\.svg(\?.*$|$)/, loader: 'file-loader?name=/img/[name].[ext]' }, // Images: png, gif, jpg, jpeg { test: /\.(png|gif|jpe?g)$/, loader: 'file?name=/img/[name].[ext]' }, // HTML: htm, html { test: /\.html?$/, loader: "file?name=[name].[ext]" }, // Font files: eot, ttf, woff, woff2 { test: /\.(eot|ttf|woff2?)(\?.*$|$)/, loader: 'file?name=/fonts/[name].[ext]' } ] }, output: { path: './dist', filename: 'bundle--[name].js' }, }; module.exports = config; Note: You may have to install several more node modules to make the above configuration work. For example, babel-loader is needed to process javascript files (npm install –save babel-loader). The above displays a few variations of how you can specify the loaders you want to use.
Third party packages can often be very big and bulky. Your javascript files may look something like this: ‘use strict’; let jquery = require(‘jquery’); let react = require(‘react’); ... Webpack is intelligent enough to recognize and include these libraries as part of the bundle. However, if you have several pages with similar patterns, webpack will compile all the third party libraries into EACH bundle! This does not bode well because it makes static assets harder to cache and bundles unnecessarily large. Ideally, we want to bundle the unchanging vendor files into its own bundle and have your custom code reference them, provided you include the files in your HTML code in order. Unfortunately, you cannot simply make modifications to the entry like above. You will also need to tap into the CommonsChunkPlugin plugin to parse the bundled assets in such a way where the namespacing of the included assets are consistent across all files. So try this: 'use strict'; const webpack = require('webpack'), glob = require('glob'); let config = { entry: { 'vendor': [ 'react', 'angular', 'jquery' ], // Auto-detect all pages in directory. 'myPages': glob.sync('./path/to/**/*.js'), }, ... plugins: [ // Pro-tip: Order matters here. new webpack.optimize.CommonsChunkPlugin([‘myPages’, 'vendor'], 'bundle--[name].js') ] }; module.exports = config; Now you have consistent namespacing, and you can include your assets on your static HTML like so: ... ...
To make your assets production ready without too much effort, you can tap into the ugilify plugin to remove all white spaces and minify your assets: … plugins: [ // Minify assets. new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false // https://github.com/webpack/webpack/issues/1496 } }) ] ...
This article touches the surfaces of some of the things webpack can tackle. At first, you’ll notice that you will do a lot of initial configuration work when you first engage with webpack. Once you get it to a point it does everything you need it, it’s a feature that you pretty much set it and forget it (at least from my experiences).
'use strict'; const webpack = require('webpack'), glob = require('glob'); let config = { entry: { 'vendor': [ 'react', 'angular', 'jquery' ], // Auto-detect all pages in directory. 'myPages': glob.sync('./path/to/**/*.js'), }, module: { loaders: [ // Javascript: js, jsx { test: /\.jsx?$/, loader: 'babel-loader' }, // CSS: scss, css { test: /\.s?css$/, loaders: ['style', 'css', 'sass', 'postcss-loader'] }, // SVGs: svg, svg?something { test: /\.svg(\?.*$|$)/, loader: 'file-loader?name=/img/[name].[ext]' }, // Images: png, gif, jpg, jpeg { test: /\.(png|gif|jpe?g)$/, loader: 'file?name=/img/[name].[ext]' }, // HTML: htm, html { test: /\.html?$/, loader: "file?name=[name].[ext]" }, // Font files: eot, ttf, woff, woff2 { test: /\.(eot|ttf|woff2?)(\?.*$|$)/, loader: 'file?name=/fonts/[name].[ext]' } ] }, output: { path: './dist', filename: 'bundle--[name].js' }, plugins: [ // Pro-tip: Order matters here. new webpack.optimize.CommonsChunkPlugin([‘myPages’, 'vendor'], 'bundle--[name].js'), // Minify assets. new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false // https://github.com/webpack/webpack/issues/1496 } }) ] }; module.exports = config;
Senior Developer
2 Comments
Phase2
Recommend
1
Login
Sort by Best
Share
Join the discussion… Chris O'Neil • 2 days ago
Fantastic post. I appreciate the overview and the rationale behind each approach
• Reply • Share ›
Go Green • 6 months ago
Great Post!! He decribed as very easily. I would to bundle all fonts and images as one file. How can I do it?
Subscribe
• Reply • Share ›
Add Disqus to your siteAdd DisqusAdd
Privacy
Whether you are looking to transform your organization, disrupt an industry, or simply be part of our team - we’d love to hear from you. CONTACT US
1330 Braddock Place Suite 700 Alexandria, VA 22314
SERVICES WORK PRIVACY POLICY
39°
41°
38°
330 W 38th Street Suite 301 New York, NY 10018
25 Taylor Street Suite 509 San Francisco, CA 94102
514 NW 11th Ave Suite 203 Portland, OR 97209
IDEAS
AGENCY
Copyright © 2018 Phase2 Technology, L.L.C. All Rights Reserved.
CAREERS
CONTACT
45
SUBSCRIBE TO NEWSLETTER