Webpack 5 Vue.js Boilerplate

Webpack 5 boilerplate using Vue.js, Babel, PostCSS and Sass with a hot dev server and an optimized production build.

Issues

• Needed to update vue-loader at the 14-02-2024 working with Node 14.23

Usage

Installing

• Make sure you have a new version of Node installed
• Download the code by zip or fork
• Run the command npm install by the command promt

Development server:

• npm start
• You can view the development server at localhost:8080.

Production build:

• npm run build

To view the build use http-server:

• npm prod

Features

• webpack
• vue.js
• Babel
• Sass
• PostCSS

Dependencies

Vue.js

• vue - A framework for making user interfaces
• vue-router - Routing in Vue

Babel

• @babel-runtime - Babel Runtime for dev babel/plugin-transform-runtime.

Other

• core-js - Main Library with polyfills for older Browsers
• whatwg-fetch - For making promise based web request progammitically

devDependencies

webpack

• webpack - Module and asset bundler.
• webpack-cli - Command line interface for webpack
• webpack-dev-server - Development server for webpack
• webpack-merge - Simplify development/production configuration

Babel

• @babel/core - Transpile ES6+ to ES5
• @babel/preset-env - Smart defaults for Babel
• @babel/plugin-transform-runtime - Babel to use async/await
• @babel/plugin-proposal-object-rest-spread - Babel helper
• @babel/plugin-transform-arrow-functions - For arrow functions
• @babel/plugin-transform-async-to-generator - Generator for async/await
• @babel/plugin-proposal-class-properties - Use properties on a class

Vue Loaders

• vue-loader - webpack loader for Vue Single-File Components
• vue-style-loader - Load styles into the DOM
• vue-template-compiler - Pre compilation of Vue 2.0 templates into render functions

Loaders

• babel-loader - Transpile files - Babel/webpack
• sass-loader - Load SCSS and compile to CSS
• node-sass - Node Sass
• postcss-loader - Process CSS with PostCSS
• postcss-preset-env - Sensible defaults for PostCSS
• css-loader - Resolve CSS imports
• style-loader - Inject CSS into the DOM

Plugins

• clean-webpack-plugin - Remove/clean build folders
• copy-webpack-plugin - Copy files to build directory
• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extract CSS into separate files
• css-minimizer-webpack-plugin - Optimize and minimize CSS assets
• cross-env - Cross platform configuration
• http-server - HTTP server for testing the produktion build by running npm run prod

Author

• Per Olsen

License

This project is open source and available under the MIT License.