webpack.config.js

const path = require('path'),
    webpack = require('webpack'),    
    CopyWebpackPlugin = require('copy-webpack-plugin'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    ManifestPlugin = require('webpack-manifest-plugin'),
    glob = require("glob");




const outputPathRelative = 'dist/';
const staticRelative = 'static/';
const staticPath = path.resolve(__dirname, staticRelative);
const distPath = path.join(staticPath, outputPathRelative);
const vsPath = path.join(staticPath, 'vs/');
const assetPath = path.join(staticPath, "assets");
const manifestPath = 'manifest.json';  //if you change this, you also need to update it in the app.js
const outputname = process.env.NODE_ENV == "DEV" ? 'main.js' : 'bundle.[hash].js';
const cssName = process.env.NODE_ENV  == "DEV" ? 'styles.css' :  "styles.[contenthash].css";
const manifestPlugin = new ManifestPlugin({
    fileName: manifestPath
});

const assetEntries = glob.sync(`${assetPath}/**/*.*`).reduce((obj, p) => {
    const key = path.basename(p);
    obj[key] = p; 
    return obj;
}, {});



module.exports = [
    //if you change the order of this, make sure to update the config variable in app.js
    //server side stuff
    // currently we just want to shove a cache path onto the static assets so we can get the hash onto the filename 
    //this means we can set the cache for eternity 
    {
        entry: assetEntries,
        output: {
            path: path.join(distPath, 'assets'),
            filename: '.[name].ignoreme',
        },
        module: {
            rules: [
                { 
                    test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
                    use: [{
                        loader: 'file-loader',
                        options: {   
                             name: '[name].[hash].[ext]'
                        }  
                    }]                
                },
            ],
        },
        plugins:[
            manifestPlugin
        ]
    }, 
    //this is the client side
    {
        entry: './static/main.js',
        output: {
            filename: outputname,
            path: distPath,
            publicPath: "/dist/"
        },
        resolve: {
            modules: ['./static', "./node_modules"],
            alias: {
                //is this safe?
                goldenlayout:  path.resolve(__dirname, 'node_modules/golden-layout/'),
                lzstring:  path.resolve(__dirname, 'node_modules/lz-string/'),
                filesaver:  path.resolve(__dirname, 'node_modules/file-saver/'),
                vs: path.resolve(__dirname, 'node_modules/monaco-editor/min/vs')
            }
        },
        stats: "errors-only",
        devtool: 'source-map',
        module: {
            rules: [
                {
                    test: /\.css$/,
                    exclude: path.resolve(__dirname, 'static/themes/'),
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader",
                    })
                },
                {
                    test: /\.css$/,
                    include: path.resolve(__dirname, 'static/themes/'),
                    use: ['css-loader']
                },
                { 
                    test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
                    loader: 'url-loader?limit=8192' 
                }
            ]},
            plugins: [
                new CopyWebpackPlugin([{
                    from: 'node_modules/monaco-editor/min/vs',
                    to: vsPath,
                },
                {
                    from: path.join(staticPath, "favicon.ico"),
                    to: distPath,
                }
                ]),
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery'
                }),
                new ExtractTextPlugin(cssName),
                manifestPlugin
            ]
        },

    ];