Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shaherashraf/webpackboilerplate
📦 A webpack boilerplate using Babel, PostCSS and Sass.
https://github.com/shaherashraf/webpackboilerplate
babel es6 hot-reloading hot-replacement javascript postcss sass webpack
Last synced: 16 days ago
JSON representation
📦 A webpack boilerplate using Babel, PostCSS and Sass.
- Host: GitHub
- URL: https://github.com/shaherashraf/webpackboilerplate
- Owner: ShaherAshraf
- Created: 2021-12-07T12:32:08.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-12-07T12:44:10.000Z (about 3 years ago)
- Last Synced: 2024-05-03T03:58:54.939Z (8 months ago)
- Topics: babel, es6, hot-reloading, hot-replacement, javascript, postcss, sass, webpack
- Language: JavaScript
- Homepage:
- Size: 113 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📦 webpack Boilerplate
[](https://opensource.org/licenses/MIT)
A webpack boilerplate using Babel, PostCSS and Sass.
## Installation
Clone this repo and npm install.
```bash
npm i
```
## Usage
### Development server
```bash
npm run serve
```
You can view the development server at `localhost:3000`.
### Production build
```bash
npm run build
```
## Features
- [webpack](https://webpack.js.org/)
- [Babel](https://babeljs.io/)
- [Sass](https://sass-lang.com/)
- [PostCSS](https://postcss.org/)
## Dependencies
### webpack
- [`webpack`](https://github.com/webpack/webpack) - Module and asset bundler.
- [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for webpack
- [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for webpack
### Babel
- [`@babel/core`](https://www.npmjs.com/package/@babel/core) - Transpile ES6+ to backwards compatible JavaScript
- [`@babel/cli`](https://babeljs.io/docs/en/babel-cli) - A CLI used to compile files from the command line.
- [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) - Smart defaults for Babel
### Loaders
- [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files with Babel and webpack
- [`sass-loader`](https://webpack.js.org/loaders/sass-loader/) - Load SCSS and compile to CSS
- [`sass`](https://www.npmjs.com/package/sass) - Node Sass
- [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) - Process CSS with PostCSS
- [`postcss-preset-env`](https://www.npmjs.com/package/postcss-preset-env) - Sensible defaults for PostCSS
- [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolve CSS imports
- [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM
### Plugins
- [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin) - Extract CSS into separate files
- [`autoprefixer`](https://github.com/postcss/autoprefixer) - A PostCSS plugin which parses your CSS and adds vendor prefixes
- [`postcss-import`](https://github.com/postcss/postcss-import) - PostCSS plugin to transform @import rules by inlining content.
## Author
- [Shaher Ashraf](https://thegoat7.netlify.app/)