Sensible webpack 5 boilerplate using Babel, PostCSS and Sass with a hot dev server and an optimized production build.
Clone this repo and npm install.
npm inpm startYou can view the development server at localhost:8080.
npm run buildNote: Install http-server globally to deploy a simple server.
npm i -g http-serverYou can view the deploy by creating a server in dist.
cd dist && http-serverwebpack- 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-plugin-prettier- Dependency for prettier usage with ESLinteslint-import-resolver-webpack- Throw exceptions for import/export in webpackeslint-webpack-plugin- ESLint configuration for webpackprettier- Dependency forprettier-webpack-pluginpluginprettier-webpack-plugin- Prettier configuration for webpack
This project is open source and available under the MIT License.