webpack-brevity

Make Webpack configurations easier

Why?

• Focus only on the variations of Webpack configs among projects
• Reduce Webpack related dependencies from your projects
• Break down configs into chunks for easier maintenance
• Employ modern settings for SPA (Hot Reload, babel-loader, postcss-loader, ExtractTextPlugin, Service Worker, Code Splitting etc.)

Installation

yarn add webpack-brevity

Usage

With built-in Babel, Css Module and PostCss loader, you can inject dependencies without touching underlying content.

Example:

import path from 'path'
import transform from 'webpack-brevity'
 
export default transform({
  entry: {
    app: path.resolve('./src/app.js'),
    vendor: [
      'normalize.css',
    ],
  },
  output: path.resolve('./public'),
  context: path.resolve('./src'),
})

You can add additional configs or override the webpack configs as well:

export default configs({
  // Core configs
  entry: path.resolve('./src/app.js'),
  output: path.resolve('./public'),
  context: path.resolve('./src'),
 
  // Override configs
  node: {
    net: 'empty',
    tls: 'empty',
    dns: 'empty',
  },
 
  // Custom meta and link tags
  name: 'Web Instant',
  title: 'Web Instant | A tool that generates web app instantly',
  description: 'Create and Start your web application instantly - web-instant.io',
 
  // Google Analytics tracking id
  ga: 'UA-XXXX-XX',
 
  // Copy static assets
  copy: [{
    from: '',
    to: '',
  }],
})