Upgrading from Webpack 1 to Webpack 2

posted in: Uncategorized | 0

Webpack is an awesome Javascript transpiler for writing ES6 code that can run on ES5-compatible web browsers. Webpack’s popularity arose with React’s adoption. It’s not limited to React web apps, though: it can transpile any Javascript web application such as Angular 1.x.

I have an existing Angular 1.x web application that I transpile using Webpack 1. Since Webpack 2.2 has entered into release candidates with no further features to add as of December 14, 2016, it’s the right time to upgrade my web application. To upgrade from Webpack 1 to Webpack 2, I followed the the migration notes:

https://webpack.js.org/guides/migrating/

And I referred to the configuration docs for Webpack 2:

https://webpack.js.org/configuration/

The upgrade took less than 2 hours to complete for my project. In addition to upgrading webpack, I had to update a few dependencies (sass-loader, babel-loader) and get some directly from the github repository (extract-text-webpack-plugin) since the Webpack 2.2-compatible release hasn’t launched yet.

Initially I ran into a problem where Webpack didn’t run properly, but removing node_modules directory and running npm install solved that problem.

Overall the consistency of the configuration file is better than in Webpack 1.