D'Angelo Coding Challenge
Coding challenge using babel, sass, with a hot dev server and an optimized production build.Configured with eslint rules.
Installation
git clone https://github.com/marcesdan/viapool-challenge.git mdangelo-viapool-challenge
cd mdangelo-viapool-challenge
yarn / npm i
Usage
Development server
yarn start / npm startYou can view the development server at localhost:8080.
Production build
yarn build / npm run buildFeatures
Dependencies
webpack
webpack- Module and asset bundler.webpack-cli- Command line interface for webpackwebpack-dev-server- Development server for webpackwebpack-merge- Simplify development/production configurationcross-env- Cross platform configuration
Babel
@babel/core- Transpile ES6+ to backwards compatible JavaScript@babel/plugin-proposal-class-properties- Use properties directly on a class (an example Babel config)@babel/preset-env- Smart defaults for Babel
Loaders
babel-loader- Transpile files with Babel and webpacksass-loader- Load SCSS and compile to CSSnode-sass- Node Sass
css-loader- Resolve CSS importsstyle-loader- Inject CSS into the DOM
Eslint
eslint-config-airbnb- Provides Airbnb's .eslintrc as an extensible shared config.eslint-import-resolver-alias- a simple Node behavior import resolution plugin for eslint-plugin-import, supporting module alias.eslint-plugin-babel- an eslint rule plugin companion to babel-eslint.eslint-plugin-import- This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.eslint-plugin-jsx-a11y- Static AST checker for accessibility rules on JSX elements.eslint-plugin-react- React specific linting rules for ESLint.
Plugins
clean-webpack-plugin- Remove/clean build folderscopy-webpack-plugin- Copy files to build directoryhtml-webpack-plugin- Generate HTML files from templatemini-css-extract-plugin- Extract CSS into separate filesoptimize-css-assets-webpack-plugin- Optimize and minimize CSS assetsterser-webpack-plugin- Optimize and minimize JavaScript