@ilabdev/webpack

Gulp tasks for linting & compiling scripts with webpack

Installation & set up

Install @ilabdev/webpack

npm install @ilabdev/webpack --save-dev

-- OR --

yarn add @ilabdev/webpack --dev

Include @ilabdev/webpack in your gulpfile.js

NOTE: Make sure you pass gulp through to the package as shown below. The package sets up gulp tasks and will need it passed through to work.

require( '@ilabdev/webpack' )( gulp )

Add the content from config.sample.js to your .gulpconfig.js and adjust as appropriate

module.exports = {
    // Other configs here...
    webpack: {
        process: true,
        watch: true,
        logColor: 'magenta',
        areas: [
            {
                paths: {
                    src: './src/js/scripts.js',
                    watch: './src/js/**/*',
                    dest: './dist/js',
                },
                minify: {
                    process: true,
                    separate: false,
                },
                pipes: {
                    // Put any pipe overrides here
                    src: {
                        allowEmpty: true,
                        base: './src/js',
                        sourcemaps: true,
                    },
                    dest: {
                        sourcemaps: '.',
                    },
                },
            },
        ],
        pipes: {
            filters: {
                lint: [
                    '**/*.js',
                ],
                build: [
                    '**/*.js',
                    '!**/libs/**/*.js',
                ],
            },
            watch: {
                events: 'all',
            },
            eslint: {
                // Overrides the version of eslint used
                eslint: null,
                formatter: 'stylish',
                options: {
                    fix: false,
                },
            },
            webpack: {
                // Overrides the version of webpack used.
                webpack: null,
                options: {
                    externals: {
                        react: 'React',
                        'react-dom': 'ReactDOM',
                    },
                    target: 'browserslist',
                    module: {
                        rules: [
                            {
                                test: /\.jsx?$/,
                                exclude: /(node_modules|bower_components)/,
                                use: {
                                    loader: 'babel-loader',
                                    options: {
                                        presets: [
                                            '@babel/preset-env',
                                            '@babel/preset-react',
                                        ],
                                        plugins: [],
                                    },
                                },
                            },
                        ],
                    },
                    resolve: {
                        extensions: ['.js', '.jsx', '.json'],
                    },
                    devtool: 'source-map',
                    mode: 'development',
                },
            },
            uglify: {
                output: {
                    comments: '/^!|@preserve|@license|@cc_on/i',
                },
            },
        },
    },
    // Other configs here...
}

Run gulp webpack to run the linting & compiling tasks, gulp webpack:lint to run the linting task, gulp webpack:build to run the compiling task, gulp webpack:watch to run the watch task, or add the task as a script and run that with npm or yarn

Config

process

Type: boolean

Whether to lint & compile scripts or not

watch

Type: boolean

Whether to watch scripts for changes or not

loggerColor

Type: string

The logger color to use for any output text. See https://github.com/stgdp/fancy-logger#available-modifiers for colors that can be used

areas

Type: object[]

The areas to be linted & compiled. Each area has it's own, isolated settings to allow for separate configs

areas[].paths

Type: object

Path references for the linter & compiler

areas[].paths.src

Type: string[]|string

The paths to linted & compiled. Passed through to gulp.src, items can be globs

areas[].paths.watch

Type: string[]|string

The paths to watched. These are combined into a single array and passed through to gulp.watch

areas[].paths.dest

Type: string

The destination path of the compiled scripts. Passed through to gulp.dest, items can be globs

areas[].paths.minify

Type: object

The options for minifying scripts

areas[].paths.minify.process

Type: boolean

Whether to minify scripts or not

areas[].paths.minify.separate

Type: boolean

Whether minified scripts should be separate files or not

areas[].pipes

Type: object

Options to be passed through to the pipes.

areas[].pipes.src

Type: object

Options to be passed through to the gulp.src pipe. See https://gulpjs.com/docs/en/api/src/ for more information

areas[].pipes.dest

Type: object

Options to be passed through to the gulp.dest pipe. See https://gulpjs.com/docs/en/api/dest/ for more information

pipes

Type: object

Options to be passed through to the pipes.

pipes.filters

Type: object

Filters for each task

pipes.filters.lint

Type: string[]

Filters for the lint task

pipes.filters.build

Type: string[]

Filters for the build task

pipes.watch

Type: object

Options to be passed through to the gulp.watch pipe. See https://gulpjs.com/docs/en/api/watch/ for more information

pipes.eslint

Type: object

Options for eslint

pipes.eslint.eslint

Type: class|null

Overrides the version of eslint used. Must pass through the eslint class e.g. require( 'eslint' ).ESLint

pipes.eslint.formatter

Type: string

The formatter to be used to output errors & warnings. See https://eslint.org/docs/latest/use/formatters/ for more information

pipes.eslint.options

Type: object

Options to be passed through to the eslint class. See https://eslint.org/docs/latest/integrate/nodejs-api#parameters for more information

pipes.webpack

Type: object

Options for webpack

pipes.webpack.webpack

Type: function|null

Overrides the version of webpack used

pipes.webpack.options

Type: object

Options to be passed through to webpack. See https://webpack.js.org/configuration/ for more information

pipes.uglify

Type: object

Options to be passed through to gulp-uglify. See https://www.npmjs.com/package/gulp-uglify for more information