Homepage
Open in app
Sign in
Get started
A beginner’s guide to Webpack 2
Follow
Introduction
Introduction
What is Webpack?
Bharat Tiwari
May 5, 2017
Setup and Installation
Setup and Installation
Basic folder structure setup
Bharat Tiwari
May 5, 2017
Installing Webpack
Installing Webpack
Two options:
Bharat Tiwari
May 5, 2017
Webpack configuration file
Webpack configuration file
In the last section, we ran the webpack command (on terminal or via npm script) with two arguments:
Bharat Tiwari
May 5, 2017
using html-webpack-plugin to generate index.html
using html-webpack-plugin to generate index.html
Now that we got webpack configured to package and bundle our js code in a single file -app.bundle.js, we need an index.html for our web app…
Bharat Tiwari
May 5, 2017
‘watch’ Mode
‘watch’ Mode
We can have webpack running in a watch mode. With watch-mode enabled, webpack will keep ‘watch’-ing for any changes we make in our code and…
Bharat Tiwari
May 6, 2017
Bundling module dependencies
Bundling module dependencies
To see how webpack bundles and packages our other dependent javascript modules in the final app.bundle.js, lets create another js file and…
Bharat Tiwari
May 6, 2017
Resolve common file extensions
In the previous section, we imported our my-helper-module in our app.js as below:
Bharat Tiwari
May 6, 2017
Multiple Entries
Multiple Entries
Sometimes you may want to package your javascript files into multiple bundles.
Bharat Tiwari
May 6, 2017
Multi-page applications
Multi-page applications
What if we have a multi-page app? Lets say, we have two html files — index.html and settings.html. index.html uses app.js and settings.html…
Bharat Tiwari
May 7, 2017
Common chunks
Common chunks
In order to understand common chunks, lets create a 'sharedModule.js' in our ./src/scripts folder.
Bharat Tiwari
May 7, 2017
webpack-dev-server (WDS)
webpack-dev-server (WDS)
So far we have been verifying our changes, that we made to our code locally on the system, by manually opening the index.html in the…
Bharat Tiwari
May 7, 2017
Hot Module Replacement
During development, lets say you have your application opened in your browser window, and you have navigated to page or state of step 3 of…
Bharat Tiwari
May 10, 2017
Webpack Loaders, CSS and Style Loaders
Webpack Loaders, CSS and Style Loaders
Let’s see how to get our styles - css and sass files - bundled in our webpack application package.
Bharat Tiwari
May 10, 2017
Using SASS
Using SASS
Now, lets also add a .scss file and try to bundle it with webpack using sass-loader.
Bharat Tiwari
May 11, 2017
Extract Text Plugin
Extract Text Plugin
In the last lesson, we got our styles working all good; getting the css and scss files bundled and then getting the resulting css included…
Bharat Tiwari
May 12, 2017
Handling Images
Handling Images
Usually there are two ways the images are used in a web application — using the <img> tag in the HTML or thru css by setting…
Bharat Tiwari
May 20, 2017
File-loader for large size images
File-loader for large size images
In the previous lesson, we saw how to use url-loader in webpack to bundle images, smaller than the specified limit for the image file size…
Bharat Tiwari
May 24, 2017
Copy all images/files to a folder using copy-webpack-plugin
Copy all images/files to a folder using copy-webpack-plugin
In the previous lessons we saw how to use url-loader andfile-loader that allow webpack to bundle/pack images used in our web application…
Bharat Tiwari
May 24, 2017
About A beginner’s guide to Webpack 2
Latest Stories
Archive
About Medium
Terms
Privacy
Teams