Skip to content

Instantly share code, notes, and snippets.

@LavaToaster

LavaToaster/webpack.config.js

Created July 11, 2018 10:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save LavaToaster/263e04e2a8daf0043bc96ca97e86be98 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save LavaToaster/263e04e2a8daf0043bc96ca97e86be98 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. LavaToaster created this gist Jul 11, 2018.
    139 changes: 139 additions & 0 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,139 @@
    const webpack = require('webpack');
    const nodeExternals = require('webpack-node-externals');
    const {
    createConfig,

    // Feature blocks
    typescript,

    // Production blocks
    uglify,

    // Helper blocks
    setMode,
    entryPoint,
    setOutput,
    customConfig,
    sourceMaps,
    addPlugins,
    env,
    resolve,
    performance,
    setEnv,
    } = require('webpack-blocks');
    const path = require('path');

    const cwd = process.cwd();

    const paths = {
    src: path.resolve(cwd, 'src'),
    nodeModules: path.resolve(cwd, 'node_modules'),
    build: path.resolve(cwd, 'build', 'web'),
    buildPublic: path.resolve(cwd, 'build', 'web', 'public'),
    assetsPath: '/public/',
    };

    const generateConfig = (envVars = null, argv = null, type = 'server') => {
    const blocks = [
    setMode(process.env.NODE_ENV || 'development'),
    resolve({modules: [paths.src, paths.nodeModules]}),
    typescript(),
    setEnv({
    NODE_ENV: process.env.NODE_ENV
    }),
    customConfig({
    module: {
    rules: [
    {
    test: /\.graphqls$/,
    use: 'raw-loader'
    }
    ]
    }
    }),
    ];

    if (type === 'server') {
    blocks.push(
    env('production', [
    entryPoint('./src/target/web/server.tsx'),
    ]),
    env('development', [
    entryPoint('./src/devServer.tsx'),
    ]),
    sourceMaps('source-map'),
    setOutput({
    path: paths.build,
    publicPath: paths.assetsPath,
    filename: 'server.js',
    }),
    customConfig({
    target: 'node',
    externals: [nodeExternals()],
    stats: 'errors-only',
    }),
    addPlugins([
    new webpack.ProgressPlugin(),
    ])
    );
    }

    if (type === 'browser') {
    blocks.push(
    sourceMaps('eval'),
    entryPoint('./src/target/web/client.tsx'),
    setOutput({
    path: paths.buildPublic,
    publicPath: paths.assetsPath,
    filename: 'client.js',
    }),
    customConfig({
    target: 'web',
    }),
    env('production', [
    sourceMaps('source-map'),
    uglify({
    parallel: true,
    }),
    ]),
    env('development', [
    sourceMaps(),
    addPlugins([
    new webpack.NamedModulesPlugin(),
    new webpack.LoaderOptionsPlugin({
    debug: true,
    options: {
    tslint: {
    failOnHint: true
    },
    }
    })
    ]),
    customConfig({
    devServer: {
    overlay: {
    warnings: true,
    errors: true
    }
    }
    }),
    performance({
    // Increase performance budget thresholds for development mode
    maxAssetSize: 1500000,
    maxEntrypointSize: 1500000
    })
    ]),
    );
    }

    return createConfig(blocks);
    };

    module.exports = generateConfig;

    if (process.env.NODE_ENV === 'production') {
    module.exports = [
    generateConfig(null, null, 'server'),
    generateConfig(null, null, 'browser'),
    ];
    }