webpack-config by Batyodie

An opinionated webpack config for GitHub apps.

Features!

• Single and multiple HTML entry points
• Common chunks bundle when using multiple entry points
• ES6 transpilation via Babel
• Source Maps
• PostCSS/scss(sass)/less
• Eslint/pritter/stylelint
• Pre-commit
• Image Optimization
• HTML, css and JS minification (in production)
• Static brotli compression (in production)

Deployment

Currently intended for deployment on heroku, more on deployment.

Basic Setup

Dillinger requires Node.js v4+ to run.

Install the dependencies and devDependencies and start the server.

$ cd my-project
$ npm install 
$ npm run start

For development environments…

$ npm run dev

Directory Structure

app
├── package.json
├── src
│ └── index.js
│ └── index.html
│ └── styles.css
│ └── assets
│ │ └── fonts
│ └── common
│ │ └── button
│ │ │ └── button.css
│ │ │ └── button.js
│ │ │ └── button.png
│ └── desktop
│ └── touch
│ └── styles
│ │ └── vars.css
│ │ └── reset.css
│ │ └── break-points.css
├── webpack.config
├── node_modules
├── dist
├── .gitignore
├── README

Building for source

For production release:

$ npm run build 

src/assets

The public/ directory contains static assets that will be exposed as is. This is useful for well known static assets that need to be served at a specific root path like favicon.ico and robots.txt fonts.

src/

Contains source JavaScript, CSS and other assets that will be compiled via webpack.

src/common

General directory for storing blocks, components, elements and modifiers.

src/desktop

Directory for storing blocks, components, elements and modifiers designed for desktop devices.

src/touch

Directory for storing blocks, components, elements and modifiers intended for touch devices

src/styles

A directory for storing static styles such as normalize reset css, vars,
breakpoints, or styles for third-party libraries

src/index.js

Is the main entry point for bootstrapping the application.

When using vue, this file should render the root application component.

import Vue from ‘vue’
import App from ‘./App.vue’
new Vue({
render: h => h(App)
}).$mount(’#app’)