@rfcaio/webpack-config v0.6.0

webpack-config

A webpack configuration generator for my projects.

Install

$ npm install --save-dev @rfcaio/webpack-config

Usage

Install webpack and the rest of dependencies.

$ npm install --save-dev webpack webpack-cli webpack-dev-server

Install webpack-merge to manage configuration parts.

$ npm install --save-dev webpack-merge

Create a webpack configuration file.

// webpack.prod.js
const merge = require('webpack-merge')
const config = require('@rfcaio/webpack-config')

module.exports = merge([
  config.extractCSS(),
  config.useHtmlPlugin(),
  {
    mode: 'production'
  }
])

Use configuration via webpack.

$ npx webpack --config webpack.prod.js

API

devServer

Generates a configuration for webpack-dev-server.

config.devServer()
/*
{
  stats: 'errors-only'
}
*/

config.devServer({ port: 1337, stats: 'verbose' })
/*
{
  port: 1337,
  stats: 'verbose'
}
*/

extractCSS

Generates a configuration to extract CSS files. Useful for production builds.

config.extractCSS()
/*
{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
}
*/

loadCSS

Generates a configuration to load CSS files.

config.loadCSS()
/*
{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

loadJavaScript

Generates a configuration to load JavaScript files.

config.loadJavaScript()
/*
{
  module: {
    rules: [
      {
        exclude: /node_modules/,
        test: /.js$/,
        use: ['babel-loader']
      }
    ]
  }
}

For now, you have to setup babel too.

$ npm install --save-dev @babel/core @babel/preset-env babel-loader

Then, create .babelrc file.

{
  "presets": ["@babel/preset-env"]
}

useErrorOverlayPlugin

Generates a configuration for error-overlay-webpack-plugin.

config.useErrorOverlayPlugin()
/*
{
  plugins: [new ErrorOverlayWebpackPlugin()]
}
*/

useHtmlPlugin

Generates a configuration for html-webpack-plugin.

config.useHtmlPlugin()
/*
{
  template: 'src/index.html'
}
*/

config.useHtmlPlugin({ minify: true, template: 'src/main.html' })
/*
{
  minify: true,
  template: 'src/main.html'
}
*/