Webpack is not limited to being used on the front-end, but is useful in backend Node.js development as well.
There are many predecessors of Webpack and lots of similarities in what those tools and Webpack do. The main difference is that those tools are known as task runners, while Webpack was born as a module bundler.
Webpack can be installed globally or locally for each project.
Webpack can be installed locally as well. It’s the recommended setup, because Webpack can be updated per-project, and you have less resistance in using the latest features just for a small project rather than updating all the projects you have that use Webpack.
provides more detailed error messages and suggestions
provides a better debugging experience
I made a sample app that just prints a console.log statement.
Here’s the production bundle:
Here’s the development bundle:
Webpack can be run from the command line manually if installed globally. But generally you write a script inside the package.json file, which is then run using npm or yarn.
For example this package.json scripts definition we used before:
allows us to run webpack by running
npm run build
yarn run build
Webpack can automatically rebuild the bundle when a change in your app happens, and it keeps listening for the next change.
Just add this script:
"watch": "webpack --watch"
npm run watch
yarn run watch
One nice feature of the watch mode is that the bundle is only changed if the build has no errors. If there are errors, watch will keep listening for changes, and try to rebuild the bundle, but the current, working bundle is not affected by those problematic builds.
Webpack allows you to use images in a very convenient way, using the file-loader loader.
source-map: ideal for production, provides a separate source map that can be minimized, and adds a reference into the bundle, so development tools know that the source map is available. Of course you should configure the server to avoid shipping this, and just use it for debugging purposes
inline-source-map: ideal for development, inlines the source map as a Data URL
Psssst! I’m working on a Vue.js Course. Stay in the loop, sign up here and immediately get my Vue.js free ebook and soon the Vue.js Cheat Sheet!🔥