An open API service indexing awesome lists of open source software.

https://github.com/pyramation/webpack-4-boilerplate


https://github.com/pyramation/webpack-4-boilerplate

Last synced: about 1 year ago
JSON representation

Awesome Lists containing this project

README

          

# Webpack 4 Boilerplate ES6/Sass with build-in option to change preprocessor (less/stylus)
This Webpack 4 Boilerplate comes with 2 builds:

```
npm run build:dev
```
-> starts dev server on localhost:8080 with livereload, sourcemap

```
npm run build:prod
```
-> creates prod files to /dist with:

1. compiles sass/stylus/less to css

2. autoprefixer for browser compability

3. compiles ES6/ES7/ES8 to ES5

4. minifying for css/js

5. uglyfing js code

6. hash css and js file (file versioning for browser caching)

## Setup
1. git clone https://github.com/mwieth/Webpack-4-boilerplate.git
2. run npm install in project folder
3. npm run build:dev

## Preprocessor support (default: Sass)

--> if u want to change to less run:

1. npm install less less-loader --save-dev
2. npm uninstall node-sass sass-loader

3. set selectedPreprocessor in \webpack\loader.js to less

4. change default files in styles from sass to less (*.less) and update import in index.js line 1

--> if u want to change to stylus run:

1. npm install stylus stylus-loader --save-dev
2. npm uninstall node-sass sass-loader

3. set selectedPreprocessor in \webpack\loader.js to stylus

4. change default files in styles from sass to stylus (*.styl) update import in index.js line 1

--> if u want to use the 'original' loose *.sass syntax just change the files from
*.scss to *.sass and update import in index.js line 1