@pikpok/webpack NPM

webpack-configs

A single dependency for ~~all~~ most of your Webpack needs, yet still extendable.

Rationale

I've found a need to lock all of the Webpack-related dependencies to allow easy upgrade of packages in project without having to spend all day at reading CHANGELOG.md files and browsing through issue trackers only to find that some-loader doesn't support webpack@x.y.z yet. Another thing that annoys me is that in most of my small projects where I use Webpack my devDependencies are much bigger than dependencies. Also, creating new project from scratch consisted of many repeated yarn adds.

To address some of these issues I've decided to make a package that could be used as a single, opinionated dependency for small Webpack projects - just SCSS and Babel support. Then I realized that some of the plugins' setup could be largely simplified, so I added support for some common cases like jQuery handling.

Features

Babel transpiling with env preset, based on browserslist
CSS/SCSS handling with optional extraction to separate file
Generate font from icons, thanks to iconfont-plugin-webpack
Use external jQuery, or provide node_modules's jQuery to all of the modules
...with more to come!

Installing

Just add this package as a dependency to your project:

yarn add netkata/webpack

This package pulls all possibly needed dependencies, so you don't have to worry about installing all of the loaders and plugins separately.

Then create webpack.config.js with content like this:

const { config } = require('netkata/webpack');

module.exports = config({
  entry: './src',
  ...moreWebpackOptions,

  features: {
    scss: true,
    extcss: true,
    jquery: {
      external: true
    },
    icons: {
      src: 'src/assets/icons',
      fontDest: 'src/assets/font',
      scssDest: 'src/scss'
    }
  }
});

Then to compile files with Webpack just run: