📦 VUE2 - Webpack5 - TS

Webpack 5 boilerplate using Babel, TypeScript, Sass.

Installation

Clone this repo and npm install.

npm install

Usage

Development server

npm run start

You can view the development server at localhost:8080.

Production build

npm run build

Features

• webpack5
• Babel
• Sass

Dependencies

webpack

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

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @vue/babel-preset-app - This is the default Babel preset used in all Vue CLI projects. Note: this preset is meant to be used exclusively in projects created via Vue CLI and does not consider external use cases.
• @babel/preset-env - Smart defaults for Babel

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
  • 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

• 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

SASS - Automatic Migration

$ npm install -g sass-migrator
$ sass-migrator division **/*.scss

TS

• typescript - TypeScript compiles to readable, standards-based JavaScript.
• @typescript-eslint/eslint-plugin - Monorepo for all the tooling which enables ESLint to support TypeScript
• @typescript-eslint/parser - An ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source code.

Linters

• eslint - Enforce styleguide across application
• eslint-webpack-plugin - This plugin uses eslint to find and fix problems in your JavaScript code

Author

• FrontEndPerformer

License

LoveToCode