/webpack-starter-kit

Primary LanguageCSSMIT LicenseMIT

Webpack starter kit

Build set-up based on webpack and npm scripts for common needs.

Concepts

  • dividing source code from compiled
  • separated production task
  • modularity
  • modern, future-proof technologies
  • linting (code style / syntax errors checking)
  • browsers live reloading
  • dependencies through node modules (you can install libraries through NPM and import them in your styles/scripts)

Content

Build:

  • Webpack 3.x

Styles:

  • Normalize.css
  • PostCSS: CSSNext OR Sass + autoprefixer
  • Sourcemaps

Note You can choose only PostCSS or Sass (default is Sass):

  • change STYLES variable in package.json
  • remove unecessary folder (/src/postcss or /src/scss).
  • change styles file include in src/app.js

Scripts:

  • Javascript: ES2015+ (Babel env config)
  • Sourcemaps

Code style checking:

  • (Styles) Stylelint: standard config (+ stylelint-scss for Sass) + some sensible settings
  • (Scripts) ESLint: recommended config (+ optional: Airbnb config)

Images:

  • sprites generator (spritesmith)
  • imagemin

Browsers live reload:

  • BrowserSync
  • Webpack dev server

Base structure

src/

Entry point:

  • app.js - main project file where all other files are included

PostCSS (postcss/) / Sass (scss/):

  • main source file (main.css / main.scss)
  • base/:
    • elements: base html elements styles
  • objects/: OOCSS
  • layout/: layouts
  • components/: BEM, Atomic Design
  • settings/: project setup (variables, etc)
  • utilities/: mixins

JavaScript (js/):

  • main source file (main.js)
  • modules/: folder for javascript modules

Images (img/):

  • img/ - source images
  • img/sprite/ - source images for sprite

Fonts (fonts/) - source fonts

dist/

  • css/main.css - output css
  • js/main.js - output js
  • assets/ - output files which relate to build (images, fonts, etc)

Requirements

  • Node.js - latest v6.x LTS "Boron" is recommended

Installation

npm install

Usage

  • npm run build - build project
  • npm run start - build and watch changes (with BrowserSync)
  • npm run start:webpack-server - build and watch changes (with Webpack dev server)
  • npm run build:prod - build production-ready code

Also, you can see subtasks in package.json.

Usage with other technologies

Drupal

You should remove HTML processing:

  • delete src/pug folder
  • remove HtmlWebpackPlugin from webpack.config.babel.js config
new HtmlWebpackPlugin({
  template: 'pug/index.pug'
}),

And set up BrowserSync:

  • remove server option from BrowserSyncPlugin in webpack.config.babel.js
  • add proxy option with you local development environment address
new BrowserSyncPlugin({
  files: "dist/**/*.*",
  hostname: "localhost",
  port: 8080,
  proxy: "local.dev",
  reloadDelay: 50,
  injectChanges: false,
  reloadDebounce: 500,
  reloadOnRestart: true
}),

Browser support

  • > 0.5%
  • last 2 versions
  • IE11+

Related links

Credits