https://github.com/wochap/webpack-boilerplate

Webpack 4 boilerplate (babel, eslint, prettier, jest, sass, postcss, hmr, browsersync)
https://github.com/wochap/webpack-boilerplate

babel boilerplate es2015 eslint hmr jest postcss prettier scss simple webpack webpack-boilerplate webpack-dev-server webpack2 webpack3 webpack4

Last synced: 25 days ago
JSON representation

Webpack 4 boilerplate (babel, eslint, prettier, jest, sass, postcss, hmr, browsersync)

• Host: GitHub
• URL: https://github.com/wochap/webpack-boilerplate
• Owner: wochap
• Created: 2016-07-22T15:20:49.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T20:27:44.000Z (almost 2 years ago)
• Last Synced: 2024-04-13T21:57:40.689Z (7 months ago)
• Topics: babel, boilerplate, es2015, eslint, hmr, jest, postcss, prettier, scss, simple, webpack, webpack-boilerplate, webpack-dev-server, webpack2, webpack3, webpack4
• Language: JavaScript
• Homepage:
• Size: 4.21 MB
• Stars: 33
• Watchers: 3
• Forks: 7
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Webpack boilerplate

A highly scalable and simple webpack boilerplate for **client** apps.

> Older versions of this boilerplate with [webpack v1](https://github.com/wochap/webpack-boilerplate/tree/webpack-1), [webpack v2](https://github.com/wochap/webpack-boilerplate/tree/webpack-2), [webpack v3](https://github.com/wochap/webpack-boilerplate/tree/webpack-3)

## Quick start

Create a `.env` file. Then:

```sh

# install dependencies

$ yarn

# serve with hot reload

$ yarn build:watch

# or

$ yarn dev

# serve with hot reload and inspect webpack dev server

# https://nodejs.org/api/debugger.html#debugger_v8_inspector_integration_for_node_js

$ yarn dev:inspect

# build for production with minification

$ yarn build

# run tests

$ yarn test

# run tests and watch

$ yarn test:watch

# run test coverage report

$ yarn test:coverage

```

**NOTE: For disable source map or bundle analyzer report (both on production only) and browser sync (on development), just remove it from `.env` file.**

## Documentation

### Features

- HMR

- CSS < PostCSS < SCSS

- JS < ES2015 < ESLint < Prettier

- Browser Sync

- Images and fonts well configured.

- Long term caching.

- Tree shaking.

- Tests with Jest.

### Boilerplate structure

```

.

├── .editorconfig             # editor config

├── .env.defaults             # env default variables

├── .env.schema               # env variables schema (for validation)

├── .eslintignore             # eslint ignore config

├── .eslintrc                 # eslint config

├── .gitignore                # git ignore config

├── .nvmrc                    # nvm config

├── .prettierrc               # prettier config

├── babel.config.js           # babel config

├── package.json              # https://docs.npmjs.com/files/package.json

├── postcss.config.js         # postcss config

├── README.md                 # this file

├── webpack.config.js         # webpack config

├── yarn.lock                 # https://yarnpkg.com/en/docs/yarn-lock

├── coverage/                 # jest coverage output

├── dist/                     # webpack build output

├── test/                     # jest config

├── lib/                      # future external packages

├── public/                   # files that will be copied to dist

└── src/                      # source code

    ├── app/

    │   └── main.js           # app entry file

    ├── styles/

    │   └── main.scss         # main scss file

    └── index.html            # template used by html-webpack-plugin

```

### Troubleshooting

- `Module build failed: Error: ENOENT: no such file or directory, scandir`

Rebuild node-sass

```sh

$ npm rebuild node-sass

```

## [TODO](https://github.com/wochap/webpack-boilerplate/projects/1)