Webpack starter kit

By ADCI Solutions

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). A 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 in 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, test it, and leave us feedback!

--

--

--

We help businesses thrive online and get to the market faster than their competitors. https://www.adcisolutions.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Integrate File Upload using Multer with Node.js and Express JS

Warren Buffett’s Recent Explanation of How Money Now Works Is the Most Important in History

Better Navigation with State Machines

Discuss in words something you learned in class today or this week.

Tutorial to Native Node.js Modules with C++. Part 1 — An Introduction to Nan

Code Splitting in React: Load your bundles blazingly fast

What You Should Know About Arrow Functions

Adding a Modal

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ADCI Solutions

ADCI Solutions

We help businesses thrive online and get to the market faster than their competitors. https://www.adcisolutions.com/

More from Medium

When to use Multi-Page Apps?

Revenge of the JavaScript: Moving from Hugo to Next.js

Aliases in React, Jest and VSCode

Quote generator in react(frontendmentor)