jb-webpack-configurator v1.1.1

Webpack Configurator

Simple library which aims to streamline generation of webpack config for most common uses. It exposes fluent api that lets user create configuration object without having to remember what goes where.

• Features
• Installation
• Use
• Example
• Configuration Methods
• Testing
• License

Features

Configurable loaders and webpack features.

• babel loader
• typescript loader
• css modules loader with postcss
• eslint loader
• tslint loader
• image loader
• adding hot reaload support
• adding entries
• adding loaders
• adding plugins
• setting resolve root and aliases

TODO:

• chunk configuration
• css loader with different approach then modules (with preprocessors like less, sass, etc.)
• ship/configure some kind of most used configuration set for babel and eslint loaders

Installation

Use as dev dependency for your project. There should be no need for this configurator outside of development.

npm i --save-dev jb-webpack-configurator

All loaders are specified as peer dependencies. Install with --save-peers or just packages specified by each configuration method (Each of them can also have peer dependencies!).

Use

1. Require Configurator in your webpack.config.js file...

   var Configurator = require('jb-webpack-configurator');

2. Initialize configurator instance...

   Use init() function or constructor.

   /* init() */
   var configurator = Configurator.init({debug: true, /* options */});
   /* constructor */
   var configurator = new Configurator({debug: true, /* options */});

3. Call configuration method on configurator instance...

   configurator
       .babel({useReact: true})
       .image()
       .css()
       ...

4. Export configuration...

   module.exports = configurator.get();

Example

var NoErrorsPlugin = require('webpack').NoErrorsPlugin;
var Configurator = require('jb-webpack-configurator');

var config = Configurator
    .init({
        debug: process.env.NODE_ENV !== 'production',
        publicPath: '/static/'
    })
    .resolve('./src')
    .entry('client', './src/client')
    .babel()
    .hot('client')
    .eslint()
    .css({hashPrefix: 'myProject-'})
    .image()
    .plugin(new NoErrorsPlugin())
    .postcssPlugin(require('autoprefixer'))
    .get(); /* It's important to call get co config is generated... */

module.exports = config;

Configuration methods

Configurator(options) / init(options)

Creates configurator instance.

Available options:

• context (default: process.cwd()): Context in which webpack operates.
• debug (default: false): Turn on debug mode.
• outputFilename (default: 'js/name.js'): Output file name pattern.
• outputChunkFilename (default: 'js/partial/id.js'): Output chunk file name pattern.
• outputSourceMapFilename (default: 'js/name.map'): Output source map file name pattern.
• outputPath (default: path.resolve('./dist')): Path where all generated files are placed.
• publicPath (default: '/'): Path on web server where generated files will be available.
• target (default: 'web'): Target platform for generated bundle.

get()

Generates webpack config object.

Babel

babel(options)

Adds javascript loader which uses babel-loader. Configuration of babel-loader itself, should be done using .babelrc file.

Dependencies

• babel-loader

Available options:

• match (default: /.jsx?$/): RegExp that specifies which files are loader by the loader.

config.babel({
    match: /.jsx?$/
});

Typescript

typescript(options) / ts(options)

Adds typescript loader. Typescript itself still needs config file. Same options apply as for babel loader. Under the hood, typescript loader is just used before babel loader for .ts files. Also, when this loader is present, .ts and .tsx files are added to resolved file extensions.

Dependencies

• ts-loader

/** Long form: */
config.typescript({
    match: /.js$/
});

/** Short form: */
config.ts({
    match: /.js$/
});

Css

css(options)

Adds two loaders for css files. This configuration method is designed for css modules. One of the loaders loads project files (everything except files in node_modules) as css modules. The other one loads library css (everything from node_modules) as plain css.

In debug mode, all resulting styles are injected using style loader. In production, one concatenated css is generated using ExtractTextPlugin. This enables hot reloading of css in debug mode.

Dependencies

• css-loader
• style-loader
• postcss-loader

Available options:

• output (default: css/styles.css): Output file when generating concatenated style.
• hashPrefix (default: ''): Prefix for css module hashes (class names are hashed in css modules).

config.css({
    output: 'css/styles.css',
    hashPrefix: 'my-app-'
});

postcssPlugin(plugin)

Adds postcss plugin to configuration.

/* Common use can be adding autoprefixer. */
config.postcssPlugin(require('autoprefixer'));

ESLint

eslint()

Adds ESLint pre-loader to config. As with babel loader, configuration of linter itself is done in .eslintrc file.

Dependencies

• eslint-loader

config.eslint();

TSLint

tslint()

Adds TSLint pre-loader to config. As with babel loader, configuration of linter itself is done in tslint.json file.

Dependencies

• tslint-loader

config.tslint();

Image

image(options)

Adds image loader to config. Images are optimized (only in production, to save time in development) and moved to specified folder. Image public paths are returned in place of require.

Dependencies

• file-loader
• image-webpack-loader

Available options:

• outputPath (default: 'img'): Output path for generated images.
• optimizationLevel (default: 7): Optimization level for generated images.

config.image({
    outputPath: 'img',
    optimizationLevel: 7
});

Webpack

Functions used to set most common webpack configuration values.

entry(name, modules)

Add entry to config.

/* Pass name of entry and path to one module... */
config.entry('client', 'src/client');
/* or pass multiple module files... */
config.entry('client', ['src/client', 'src/common']);

hot(entries, opts)

Adds support for hot reloading to given entries (array or single string).

Use react-hot-loader version 3 (still in beta) when using useReact option (Migration Guide).

Dependencies

• webpack-dev-server (if you use it to run your app in development)
• webpack-hot-middleware (if you use express to run your app in development)
• react-hot-loader (if you specify react: true, for react component hot reloading)

config.hot('entry-name', {
    react: true // Add support for react-hot-loader v 3+,
    client: 'webpack-hot-middleware/client' // By default configured for webpack-dev-server, for webpack-hot-middleware use this value.
});

loader(loader)

Add loader. Can be used to add any kind of custom loader.

config.loader({
    test: /.js$/,
    loader: 'babel',
    ...
});

plugin(plugin)

Add webpack plugin.

config.plugin(new NoErrorsPlugin());

preLoader(loader)

Add pre-loader to configuration.

config.preLoader({
    test: /.js$/,
    loader: 'eslint',
    ...
});

resolveAlias(name, relativePath)

Add resolve alias to config.

config.resolveAlias('this', 'path/to/that');

resolve(relativePath)

Add resolve root to config (paths resolved as roots for requires).

config.resolve('./src');

resolveExtension(extension)

Add resolve extension (resolved by require when importing without extension).

config.resolveExtension('.jsx');

Testing

Tests are located in tests folder. Tape is used for testing.

Run:

npm test

License

This project is licensed under the terms of the MIT license.