webpack-custom-blocks ·

A set of well-thought 📦webpack-blocks for real-world projects.

Table of Content

• API
  • setEnv([options])
  • watch([options])
  • reactHotServer([options])
  • babelLoader([options])
  • cssLoader([options])
  • stylusLoader([options])
  • pugLoader([options])
  • imageLoader([options])
  • fontLoader([options])

API

setEnv([options])

Sets environmental variables to process.env and EnvironmentPlugin.

Arguments

• [options] (Object): Any enumerable properties.

Example

setEnv({
    NODE_ENV: 'development',
    HOT: true,
    // Any other variables.
})

watch([options])

Watch mode.

Arguments

• [options] (Object): See watchOptions for available properties.

reactHotServer([options])

Built on top of webpack-dev-server and react-hot-loader@3.

Arguments

• [options] (Object): Available properties:
  • [host] (String): Defaults to localhost.
  • [port] (Number|String): Defaults to 8080.
  • [publicPath] (String|Number): Defaults to '/'. The final output.publicPath will be http://${host}:${port}${path}.
  • [names] (Array): Defaults to []. If entry is an object, only chunks with these names will be extended with react-hot-loader.
  • [...rest] (*): Any valid devServer properties.

Example

const {createConfig, entryPoint, setOutput, customConfig} = require('@webpack-blocks/webpack2');
const {setEnv, reactHotServer, babelLoader} = require('@futuregroup/webpack-custom-blocks');

module.exports = createConfig([
    setEnv({
        NODE_ENV: 'development',
    }),

    entryPoint({
        all: './src/index.js',
    }),

    setOutput({
        filename: 'js/[name].js',
    }),
    
    reactHotServer({
        port: 3000,
        publicPath: '/build/',
        names: ['all'],
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    }),

    customConfig({
        target: 'web',
        devtool: 'eval',
    }),

    babelLoader({
        exclude: /node_modules/,
        babelOptions: {
            presets: ['latest', 'react'],
              plugins: ['react-hot-loader/babel'],
        },
    }),
]);

babelLoader([options])

Built on top of babel-loader.

Arguments

• [options] (Object): Available properties:
  • [test] (*)
  • [fileType] (*): Defaults to application/javascript. If test is also set, then it adds a new fileType, else uses it as an existing one.
  • [babelOptions] (Object): babel-loader options.
  • [...rest] (*): Rule options.

cssLoader([options])

Built on top of style-loader and css-loader.

Arguments

• [options] (Object): Available properties:
  • [test] (*)
  • [fileType] (*): Defaults to text/css. If test is also set, then it adds a new fileType, else uses it as an existing one.
  • [loaders] (Array): Defaults to []. Additional loaders that go after css-loader.
  • [styleOptions] (Object): style-loader options.
  • [cssOptions] (Object): css-loader options.
  • [...rest] (*): Rule options.

stylusLoader([options])

Built on top of stylus-loader and extract-loader.

Arguments

• [options] (Object): Available properties:
  • [test] (*): Defaults to /\.(styl|stylus)$/.
  • [fileType] (*): Defaults to text/x-stylus.
  • [fileOptions] (Object)
  • [extractOptions] (Object)
  • [cssOptions] (Object)
  • [stylusOptions] (Object)
  • [...rest] (*): Rule options.

pugLoader([options])

Build on top of pug-html-loader.

Arguments

• [options] (Object): Available properties:
  • [test] (*): Defaults to /\.(pug|jade)$/.
  • [fileType] (*): Defaults to text/x-pug.
  • [fileOptions] (Object)
  • [pugOptions] (Object)
  • [...rest] (*): Rule options.

imageLoader([options])

Build on top of image-webpack-loader.

Arguments

• [options] (Object): Available properties:
  • [test] (*)
  • [fileType] (*): Defaults to image.
  • [fileOptions] (Object)
  • [imageOptions] (Object)
  • [...rest] (*): Rule options.

fontLoader([options])

Arguments

• [options] (Object): Available properties:
  • [test] (*)
  • [fileType] (*): Defaults to application/font.
  • [fileOptions] (Object)
  • [...rest] (*): Rule options.