Customizable Boilerplate using Webpack 5, Babel, PostCSS and Sass with an active development server and an optimized production build.
npm installyarn startYou can view the development server at localhost:3000.
You can view the bundle Analyzer server at http://127.0.0.1:8888.
yarn 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 filesoptimize-css-assets-webpack-plugin- Optimize and minimize CSS assetsterser-webpack-plugin- Optimize and minimize JavaScript
👤 Matheus Benites
- Website: Blog
- Twitter: @papoddev
- Github: @benits
- LinkedIn: @benites-amorim
👤 Uellington Palma
- Twitter: @uell_palma
- Github: @uellpalma
- LinkedIn: @uell-palma
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Give a ⭐️ if this project helped you!