Sensible webpack 5 boilerplate using Babel, PostCSS and Sass.
Clone this repo and npm install.
npm i
npm start
You can view the development server at localhost:8080
.
npm run build
Note: Install http-server globally to deploy a simple server.
npm i -g http-server
You can view the deploy by creating a server in dist
.
cd dist && http-server
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/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
babel-loader
- Transpile files with Babel and webpacksass-loader
- Load SCSS and compile to CSSnode-sass
- Node Sass
postcss-loader
- Process CSS with PostCSSpostcss-preset-env
- Sensible defaults for PostCSS
css-loader
- Resolve CSS importsstyle-loader
- Inject CSS into the DOM
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 filescss-minimizer-webpack-plugin
- Optimize and minimize CSS assets
eslint
- Enforce styleguide across applicationeslint-config-airbnb-base
- Base styleguide to enforce ruleseslint-config-prettier
- Implment prettier ruleseslint-plugin-import
- Implment import ruleseslint-import-resolver-webpack
- Throw exceptions for import/export in webpackprettier
- Dependency forprettier-webpack-plugin
plugin
This project is open source and available under the MIT License.