webpack-assembler-react

An extension to webpack-assembler with parts specific to React + JavaScript + CSS applications

Used as an extension to webpack-assembler

Example

var path = require('path')
const {assemble, parts} = require('webpack-assembler')
parts.assign(require('webpack-assembler-react'))

const ROOT_DIR = __dirname
const SRC_DIR = exports.SRC_DIR = path.resolve(ROOT_DIR, './src')
const BUILD_DIR = exports.DIST_DIR = path.resolve(ROOT_DIR, './build')

const genBase = (env) => [
    // Env
    parts.env({
        NODE_ENV: (env && env.production) ? 'production' : 'development',
        DEBUG: !env || !env.production
    }),
    parts.circularDependency(),

    // Use
    parts.useReact(),
        
    // Page hosted entry
    parts.page({
        entry: {
            app: SRC_DIR + '/index'
        },
        template: SRC_DIR + '/index.html'
    }),

    // Handle extracted bundles.
    parts.split([
        // Extract remaining vendor bundles.
        {
            name: 'vendor',
            minChunks: parts.isVendor
        },

        // Extract the webpack manifest.
        // This changes with every build.
        {
            name: 'runtime',
            minChunks: Infinity,
        }
    ]), // extractBundles
]

const genDev = () => [
    // Output
    parts.output({
        output: {
            path: BUILD_DIR + '/dev',
            filename: '[name].bundle.js'
        },
        clean: true
    }),

    {
        devtool: 'eval-source-map',
        devServer: {
            inline: true,
            contentBase: 'src',
            port: '3001'
        }
    },

    // load CSS instead of extracting it.
    parts.useCSS()
]

const genProd = () => [
    // Output
    parts.output({
        output: {
            path: BUILD_DIR + '/prod',
            filename: '[name].bundle.[chunkhash].js'
        },
        clean: true
    }),

    {
        devtool: false,
    },

    // Extract and minify.
    parts.extractCSS(),
    parts.minifyJS(),
    parts.minifyCSS()
]

module.exports = assemble(genBase, genDev, genProd)

• API documentation
• Examples