webpack.client.js

gistfile1.txt

if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = 'production';
}

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge').smart;
const babelCachePreset = require('@mediahuis/webpack-configs/lib/loaders/babel');
const sassWithPostcssPreset = require('@mediahuis/webpack-configs/lib/loaders/sass/postcssPreset');
const extractText = require('@mediahuis/webpack-configs/lib/plugins/extractText');

const LogInfoPlugin = require('enhanced-resolve/lib/LogInfoPlugin');

const isDevelopment = process.env.NODE_ENV !== 'production';
const outputPath = path.resolve('./build');

let plugins = [
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        },
    }),
];

let bundlePackages = [];

if (!isDevelopment) {
    const ManifestPlugin = require('webpack-manifest-plugin');
    plugins.push(
        new ManifestPlugin({ fileName: './client-assets.json' })
    );
    plugins.push(
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    );
    plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            comments: false,
            sourceMap: true,
        })
    );
} else {
    bundlePackages.push('react-hot-loader/patch');
    bundlePackages.push('webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr&timeout=20000&name=Client Side Rendering');

    plugins.push(new webpack.HotModuleReplacementPlugin());
    plugins.push(new webpack.NamedModulesPlugin());
}

module.exports = merge(
    {
        name: "Client Side Rendering",
        entry: {
            bundle: bundlePackages.concat([
                './src/client.js',
            ])
        },
        output: {
            publicPath: '/',
            path: outputPath,
            filename: `static/js/[name]${isDevelopment ? '' : '.[chunkhash:8]'}.js`,
            chunkFilename: `static/js/[name]${isDevelopment ? '' : '.[chunkhash:8]'}.chunk.js`,
        },
        stats: {
            colors: true,
            hash: true,
            timings: true,
            chunks: false,
            chunkModules: false,
            modules: false
        },
        devtool: 'source-map',
        target: 'web',
        plugins: plugins,
        resolve: {
            alias: {
                MHComponents: path.resolve(__dirname + '/../node_modules/@mediahuis/frontend-mh-components/dist'),
                Components: path.resolve(__dirname + '/../src/ui-components'),
                Platform: path.resolve(__dirname + '/../src/platform/client'),
            },
            modules: ['src', 'node_modules'],
        },
        module: {
            rules: [
                {
                    exclude: /\/node_modules\//,
                    loader: 'raw-loader',
                    test: /\.svg$/,
                },
            ],
        },
    },
    babelCachePreset(),
    extractText(sassWithPostcssPreset(), 'static/css/[name].[contenthash:8].css')
);