Webpack-dev-server and Jest

About this Release

This is a pretty big release with important changes in two areas, plus a ton of smaller, but not less important stuff.

• We switched to Webpack-Dev-Server instead of rolling out own. We initially did this because back then, the Webpack-Dev-Server was missing some stuff like the error-overlay that we wanted to use. Since then, it improved a lot and with the switch to the "official" dev server we get rid of a good chunk of technical debt in this template.

• We now use Jest as the preferred test-runner for unit tests. We love jest and find that it's much faster easier to work with than the current karma+mocha setup. However, we acknowldge that many users are accustomed with the latter for quite some time and might prefer it still. So it's still an option to pick in the init process.

Things we added

Bides the two big additions, the following new features/functionalities were added:

New /config/index.js options (#975)

• dev:
  • autoOpenBrowser: Wether to open a new browser tab whenever the dev server starts.
  • useEslint: Wether to use eslint-loader in webpack. Some people might only want to use eslint in their IDE, so the loader can be deactivated here.
  • showEslintErrorsInOverlay: if using eslint-loader, this option allows to switch of the eslint errors in the error overlay shown in the browser. the errors still appear in the console & terminal, but don't break the workflow in the browser anymore.
  • notifyOnErrors: will show OS notifications whenever a build fails. Useful when your builds take some time
  • poll: enables polling mode for webpack's file-change watcher. The default mode doesn't work in some environments, like dropbox folders, Vagrant etc. so switching to polling can fix this.
• you can now change sourcemap-related options for the dev and prod builds in the config file.

We also restructured that file a bit so it hopefully makes for sense at first sight, and tried to improve comments in the config file to explain some options better.

Other additions

• We added ModuleConcatenationPlugin to the Production config (#1013, @agnivade)
• added another CommonsChunkPlugin instance that creates a vendor chunk for modules shared between codesplit chunks.

Things we improved

Other Improvements

• UglifyJS Plugin now runs in parellel mode, as recommended, so build times should improve ( #941, @Gingernaut)
• .gitignoreand.eslintignore` files received some new entries and improvements (#953, @exarus)
• dev.env.js and prod.env.js are now directly imported into the respective webpack configs instead of taking an unnecessary detour through /config/index.js.
• Improved vendor chunk config to be more in line with webpack docs' best practices

Things we fixed

• Webpack comments for naming import() chunks now works correctly (#997, @SidKwok)
• Only add instanbul to babel config if Unit test option was chosen during project setup. (#785, @huguangju)
• Browser targets for the babel-preset-env existed in both .babelrc and package.json - now removed from the former because other packages (i.e. style-lint) also read the package.json field. (#1004, @anubhav7495 )
• babelrc now only includes the istanbul plugin when the karma+mocha setup was chosen during init. Fixes a missing dependency error. (#785, @huguangju)
• autoprefixer (or more precisely - postcss) is not also applied to styles in .css files (and .scss etc.) , not only styles in .vuefiles. (#890, @yibuyisheng)
• fixed a sourcemap bug concerning css sourcemaps (#1014, @LLawlight)
• a couple of typos, grammar and broken links in the docs.

Things we removed

• dev-server.js& dev-client.js - replaced by webpack-dev-server.

Other Notes

• Due to the changes of #975, the webpack.dev.config now returns a Promise resolving to the config object.

Maintenance

• Bumped a couple of dependencies

Final Words

Thanks for the continuinf efforts of all contributors to improve this template!