vue-webpack-typescript | Project starter for Vue Typescript and Webpack | Frontend Framework library

yarn install --frozen-lockfile. You can fall back to npm if you still use it.
[OPTIONAL] If compilation above crashes on binaries, do nvm use. In total you need yarn and nvm
webpack allows to combine (bundle) multiple input javascript files into a single output file. Provides plugins and loaders api that allows transformation like typescript or sass. All configs are located under webpack directory, take a look at it to understand how source files are being processed. Its start point is entry: ['./src/user.ts']. Since webpack can only handle .js files, to let webpack know about everything else we should pass the code through a corresponding loader. Everything is imported in this files are being processed by section loaders.
node-sass allows to compile sass into css, it doesn't know anything about webpack and loaders
node-sass-utils - allow to access json via css, thus sharing variables across js and css
hard-source-webpack-plugin (increases dev server speed compilation by caching)
optimize-css-assets-webpack-plugin (minimizes css)
clean-webpack-plugin (deletes the dist before build)
compression-webpack-plugin (generates .tar.gz files in dist directories)
mini-css-extract-plugin (gets all css files from .vue components and creates a single .css file in production build)
webpack-subresource-integrity ( generates integrity attribute on scripts tag)
stylelint-webpack-plugin (during webpack build find all the css and lints it via stylelint)
speed-measure-webpack-plugin shows information about compilation speed. Helps to find out why compilation goes slow.
html-webpack-plugin ( compiles html from index.ejs)
webpack-dev-server is used for development purposes with hot reloading, every time you save the file it will automatically apply. This doesn't affect node running files, only watching files. So files like webpack/base.config.js. To build project for production set APP_PUBLIC_PATH and run yarn run buiild:prod. This generates static files in ./dist directory.
webpack-cli allows to run webpack from the command line
Loaders: sass-loader (pipes sass into css), css-loader - resolves import css files inside js modules, ' vue-loader (resolves vue sfc), vue-template-compiler (compiles <template into dom api), style-loader (packs css into js file with eval and pushes it to syle tag, file-loader (saves it as a file, and puting exported path to file as an url)
fork-ts-checker-webpack-plugin - runs typescript compiler into a separate thread
source-map-support - adds support for source map (show source file in browser instead of transpiled one)