Webpack files for production, development, dll, test and coverage: React/JSX, ES6

app(slash)alltests.js

var context = require.context('.', true, /-test\.js$/) ;
context.keys().forEach(context) ;
module.exports = context ;

mocha-webpack.opts

--require source-map-support/register
--require jsdom-global/register

package.json

    // Just part of it ..
    "dev": "webpack --config webpack.dll-dev.js && webpack --config webpack.dev.js --watch",
    "test": "mocha-webpack --webpack-config webpack.test.js --watch app/alltests.js",
    "cover": "cross-env nyc --reporter=lcov --reporter=text mocha-webpack --webpack-config webpack.cover.js ./app/alltests.js",
    "prod": "webpack --config webpack.dll-prod.js && webpack --config webpack.prod.js"

webpack.base.js

// Base file for webpack configurations.
//
// We need a number of webpack configurations, for development and production
// builds, for testing and test coverage, and to build the library DLL.
// Rather than one configuration  with lots of options, this module contains
// a set of base pieces that can be assembled in specific configuration
// files.
//
// Note that all "values" are accessed as functions, so that any global
// variables (like __dirname) are correct when the code is executed rather
// than when imported. In most cases this is not an issue, but for consistency
// all are functions.
//
var path        = require('path') ;
var webpack     = require('webpack') ;

module.exports = {

    rules: {

        js: function () {
                //
                // ES2015, JSX, etc. transpile
                //
                return {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    query: {
                        presets: [
                            'es2015'
                            ],
                        plugins: [
                            'transform-decorators-legacy',
                            'transform-class-properties',
                            'transform-react-jsx',
                            'transform-object-rest-spread'
                            ],
                        cacheDirectory: true
                        }
                    } ;
                },

        cover: function () {
                //
                // Coverage instrumentation. see:
                // http://zinserjan.github.io/mocha-webpack/index.html
                //
                return {
                    test: /\.js$/,
                    include: path.resolve('app'),
                    loader: 'istanbul-instrumenter-loader'
                    } ;
                }
        },
    plugins: {

        dllbuild: function () {
            //
            // Used when building the library.js DLL. The settings must match
            // those in dll: below.
            //
            return new webpack.DllPlugin({
                path: path.join(__dirname, "dll", "library-manifest.json"),
                name: "library",
                context: path.resolve(__dirname, "app")
                }) ;
            },

        dllref: function () {
            //
            // Include library.js DLL. See webpack.dll.config.js and
            // http://engineering.invisionapp.com/post/optimizing-webpack/
            //
            return new webpack.DllReferencePlugin({
                context: path.join(__dirname, "app"),
                manifest: require("./dll/library-manifest.json")
                }) ;
            },

        uglify: function () {
            //
            // Minification
            //
            return new webpack.optimize.UglifyJsPlugin({
                sourceMap: true,
                compress: {
                    warnings: false
                    },
                prefix: 'relative'
                }) ;
            },

        env: function () {
            //
            // Map NODE_ENV into process.env
            //
            return new webpack.EnvironmentPlugin(['NODE_ENV']) ;
            },

        global: function () {
            //
            // Add the "global" global variable. The configuration below
            // will provide a deprecation warning, need to figure out what
            // it should be.
            //
            return {
                apply: function(compiler) {
                    compiler.parser.plugin('expression global', function() {
                        this.state.module.addVariable('global', "(function() { return this; }()) || Function('return this')()");
                        return true;
                        }) ;
                    }
                } ;
            }
        },

    output: function (dir) {
            //
            // Output to specified directory (defaults to the current
            // directory) with files and source maps named by the the
            // entry name. For use in IDEs, it may be neccessary to use
            // 'absolute-resource-path'.
            //
            return {
                filename: '[name].js',
                sourceMapFilename: '[name].js.map',
                path: path.resolve(__dirname, dir || '.'),
                devtoolModuleFilenameTemplate: '[resource-path]',
                devtoolFallbackModuleFilenameTemplate: '[resource-path]?[hash]'
                } ;
            }
    } ;

webpack.cover.js

// Webpack configuration used when running code coverage.
//
var base      = require('./webpack.base') ;
var externals = require('webpack-node-externals') ;

process.env.NODE_ENV = 'development';

module.exports = {

    // Single entry
    //
    entry: {
        'bundle': './index.web.js',
        },

    // Specify the current directory for outout, although this is
    // ignored by mocha-webback.
    //
    output: base.output(),

    module: {
        rules: [
            base.rules.cover(),
            base.rules.js   (),
            ]
        },
    plugins: [
        base.plugins.dllref(),
        base.plugins.env   (),
        base.plugins.global(),
        ],

    externals: [ externals() ],
    target: 'node',
    resolve: {
        unsafeCache: true,
        },
    //
    // Not sure about this one. It is the same as in "webpack.test.js"
    // but it might not be needed at all on account of the istanbul
    // instrumenter being used.
    //
    devtool: 'source-map',
    node: {
        fs: 'empty',
        },
    } ;

webpack.dev.js

// Webpack configuration used when running development builds.
//
var base    = require('./webpack.base') ;

process.env.NODE_ENV = 'development';

module.exports = {

    // Single entry. This will be generated as bundle.js on account
    // of the entry name,
    //
    entry: {
        'bundle': './index.web.js',
        },

    // Output will be to the current directory.
    //
    output: base.output(),

    module: {
        rules: [
            base.rules.js(),
            ]
        },
    plugins: [
        base.plugins.dllref(),
        base.plugins.env   (),
        base.plugins.global(),
        ],

    target: 'web',
    resolve: {
        unsafeCache: true,
        },
    //
    // Use "eval-cheap-module-source-map". This seems to work quickly
    // and generate a usable source map (in Chrome at least). Note that
    // the source map will be embedded in the js file.
    //
    devtool: 'eval-cheap-module-source-map',
    node: {
        fs: 'empty',
        },
    } ;

webpack.dll-dev.js

// WebPack configuration to build the library.js library containing common
// packages (react, lodash, etc ...).
//
// http://engineering.invisionapp.com/post/optimizing-webpack/
//
var path        = require("path")    ;
var webpack     = require("webpack") ;
var base        = require('./webpack.base') ;

process.env.NODE_ENV = 'development';

module.exports = {

    // Single entry to build the DLL
    //
    entry: {
        library: [ "./app/library.js" ]
        },

    // Always output development builds to the current directory, with the
    // name "library", so these are hard coded.
    //
    output: {
        path: path.join(__dirname, "."),
        filename: "library.js",
        library: "library"
        },

    plugins: [
        base.plugins.dllbuild(),
        base.plugins.env     (),
        base.plugins.global  (),
        ],

    target: 'web',
    resolve: {
        unsafeCache: true,
        },
    devtool: 'eval-cheap-module-source-map',
    node: {
        fs: 'empty',
        },
    } ;

webpack.dll-prod.js

// WebPack configuration to build the library.js library containing common
// packages (react, lodash, etc ...).
//
// http://engineering.invisionapp.com/post/optimizing-webpack/
//
var path        = require("path")    ;
var webpack     = require("webpack") ;
var base        = require('./webpack.base') ;

process.env.NODE_ENV = 'production';

module.exports = {

    // Single entry to build the DLL
    //
    entry: {
        library: [ "./app/library.js" ]
        },

    // Always output production builds to the "dist" directory, with the
    // name "library", so these are hard coded.
    //
    output: {
        path: path.join(__dirname, "dist"),
        filename: "library.js",
        library: "library"
        },

    plugins: [
        base.plugins.dllbuild(),
        base.plugins.uglify  (),
        base.plugins.env     (),
        base.plugins.global  (),
        ],

    target: 'web',
    resolve: {
        unsafeCache: true,
        },
    devtool: 'source-map',
    node: {
        fs: 'empty',
        },
    } ;

webpack.prod.js

// Webpack configuration used when running the production build.
//
var base    = require('./webpack.base') ;

process.env.NODE_ENV = 'production';

module.exports = {

    // Single entry. This will be generated as bundle.js on account
    // of the entry name,
    //
    entry: {
        'bundle': './index.web.js',
        },

    // Output will be to the "dist" directory.
    //
    output: base.output('dist'),

    module: {
        rules: [
            base.rules.js(),
            ]
        },
    plugins: [
        base.plugins.dllref(),
        base.plugins.uglify(),
        base.plugins.env   (),
        base.plugins.global(),
        ],

    target: 'web',
    resolve: {
        unsafeCache: true,
        },
    //
    // Use "source-map". This generates a separate source map file.
    //
    devtool: 'source-map',
    node: {
        fs: 'empty',
        },
    } ;

webpack.test.js

// Webpack configuration used when running the unit test cases.
//
var base      = require('./webpack.base') ;
var externals = require('webpack-node-externals') ;

process.env.NODE_ENV = 'development';

module.exports = {

    // Single entry
    //
    entry: {
        'bundle': './index.web.js',
        },

    // Specify the current directory for outout, although this is
    // ignored by mocha-webback.
    //
    output: base.output(),

    module: {
        rules: [
            base.rules.js(),
            ]
        },
    plugins: [
        base.plugins.dllref(),
        base.plugins.env   (),
        base.plugins.global(),
        ],

    externals: [ externals() ],
    target: 'node',
    resolve: {
        unsafeCache: true,
        },
    //
    // The "cheaper" source map options did not seem to work for
    // me.
    //
    devtool: 'source-map',
    node: {
        fs: 'empty',
        },
    } ;