Starting with Webpack 4 and VueJs — A quick-start tutorial.

One of them actually gave a hit!

Webpack4 is officially here! Did you know they’re calling it Legato! There are a lot of new features and improvements. Sean T. Larkin’s 😎 game has been upped 3 levels in Webpack 4. You can read about the changes in this article, or here in the git-changelog.

In a nutshell, Webpack4 is up to 98% faster. They have Mode, #0CJS, and sensible defaults now. 😻 It has chunking as a configurable default for different modes. Module Types are introduced along with .mjs support and a support for WebAssembly. Javascript of the future is here! 💥

I migrated one basic VueJs starter to Webpack4 and found it quite easy. I had few hiccups because few of the plugins are yet to update for Webpack 4. But once the necessary support is there, it’s going to take minutes to port the existing projects to the latest version. I started with a #0CJS (Zero-Config JS) where default modes are used, but once I integrated Vue, I added few basic configurations to set up a starter project that includes routing, testing and a configurable HTML file.

On to the code: I’ve used 0-Configuration modes for production/development builds and used webpack-dev-server for development purposes. I’ve added all the related articles I could find on Webpack4 in the end of this article, to make your migration process easier. Each subheading points to Git repo’s code, you can directly check it from there as well by clicking on the headings.

  1. Package.json: 📁
    My initial package.json is simple. A script for development, build and one for webpack-dev-server. There are scripts for testing too.

2. webpack.config.js file : 💣
Once you have your package.json set, time to set up the webpack.config.js file. I have set up a basic file, but it can be separated or enhanced further. This one should be enough to get you started.

2.1 HtmlWebpackPlugin setup : 🍫
Simplifying it, I’ve used HtmlWebpackPlugin to take an .ejs template, and populate it with generated bundles of js/css. HtmlWebpackPlugin is not working officially, but I’ve taken a patch provided by webpack for now.

2.2 Extracting the CSS using ExtractTextPlugin : 🙅🏻
Next we take ExtractTextPlugin and extract out the CSS so as to facilitate CSS-Splitting. Now this plugin is not working right now. (*Edit: They had released a beta version of the plugin I was not aware of. Sean T. Larkin pointed that out, and I’ve updated the code so it works.*)

2.3 Setting up the mode configuration : ✋🏻
We can also set the mode of the webpack config explicitly in the config object.

2.4 Setting up the optimization configuration : 🎯
You can also configure `optimization`object. Plugins like ‘NoEmitOnErrorsPlugin’, ‘ModuleConcatenationPlugin’, ‘NamedModulesPlugin’ are moved to optimization config, and have default values set based on the mode you select. ‘CommonsChunkPlugin’ has been removed, it’s config is inside optimization object now. It can be configured as below:

One good thing about this migration was, I was able to figure out my mistakes just by reading the console errors. I did many mistakes while configuring above setting, and was easily able to set up in the correct way thanks to the informative errors I was getting. 🧀

2.5 Setting up devServer configuration for webpack-dev-server : 🎢
Now setting up the devServer. One thing I noticed was, if I set noInfo: true, then I was not getting any info about the port my server is running on, unlike previous versions. Need to probe further into it, to reach any conclusions. For now it’s false.

2.6 Setting up Modules : ⚓️
Nothing fancy, just old Vue, JS, CSS, SCSS, SVG, and image-loaders.

If you see I’ve commented out the extractCSS functions. They were not working. Scoped CSS in Vue for the win! 🥊 (*Edit: Works now. See above.*)

That’s it. This is the basic configuration/migration for webpack 4 that I needed to do, to run a simple VueJs project from scratch. I’ve added basic tests, routing, followed the directory structure of page, layout, and components.

Note: In the code above, I’ve removed few lines for the ease of explanation, the Git repo has all the necessary code for anyone to get started in VueJs and Webpack 4. I’m looking to learn and open to any feedback you all have to offer.

Javascript. Doodling. Fitness. Life. Thoughts on Medium.