node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org ¬Ľ

@futuregroup/webpack-custom-blocks

webpack-custom-blocks · npm

A set of well-thought ūüď¶webpack-blocks for real-world projects.

Table of Content

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.