Webpack starter kit

by Artyom Guryanov

31 May 2017
3 min read

There’re tons of different kits and packages that can please even a picky developer. But at the particular moment, we reached the point where we needed a kit adjusted to our development specifics.

The creation of this kit lets us ease and formalize front-end development in our company so now we have a tool for jump-starting new projects.

To cut a long story short, Webpack starter kit divides source code from compiled, separates production tasks, provides browsers with live reloading and lets you install libraries through NPM and import them in your styles/scripts.

Main features

Webpack puts together all your dependencies and prepares your code for development or production.
npm scripts allow you to get rid of the redundant wrapper in the form of specific plugins for certain builders (Gulp, Grunt).
HTML Templater. Pug will help you to manage your HTML code according to DRY principle and provide you with many features from programming languages which ease development.
Styles. There are 2 variants of styles for your choice: Sass + some PostCSS plugins or only PostCSS (CSSNext). The structure is based on BEM, OOCSS, SMACSS methodologies for convenient development and maintainability.
Modern JavaScript. you can write ES2015, ES2016 and do not worry about browser support - Babel will compile your code to ES5 that has very wide support among browsers.
A local server with live reloading Webpack Dev Server or BrowserSync provides you with a local server and browser live reloading keeping you away from routine.
Sourcemaps allow you to see your source code in the browser dev tools.
Linters: Stylelint (styles) and ESLint (JavaScript) allow you to see your deviations from industry's standards and show you syntax mistakes.
npm. This package manager in a conjunction with this build allows you to install and update vendor plugins, libraries, etc, and import them into your code easily.

Following the best Open Source practices, we made this kit available at GitHub. The GitHub page will introduce you the following:

Kit’s content
Base structure
Requirements
Installation
Usage
Browser support
Related links

Feel free to download and test it

And leave us a feedback!

Webpack

npm

Drupal

Decoupled Drupal

Headless Drupal

ADCI Solutions

Artyom Guryanov

Front-End Developer

Dedication helps Artyom turn ideas into working and progressive solutions. He is constantly learning new technologies and strives to share it with others. Artyom enjoys collaborating and contributing to the team's success

Claro Admin Theme

After 11 years, the Drupal admin panel is getting a new default theme. We have explored its pros and bet it has never been so easy and enjoyable to manage Drupal sites before.

Development

22 Aug 2023
12 min read

Who stands behind cyberattacks, and why do they do that?

What you need to know about cyberattacks in 2023

Practice shows that cyber criminals have no boundaries and their guile leads to hundreds of millions in damage to businesses. What type of cyberattacks are most common and how can you protect your website from hacking and leaks? Read our post to learn.