Add more comments in webpack.js

[isaacabraham]

Added more comments to the webpack.config.js file. I also removed the CONFIG object and embedded it directly into the configuration - I'm not sure if this is better or worse, happy to revert that, but for me as a non-webpack person it means one less object to reason about in the file.

Also renamed the server proxy port to SERVER_PROXY_PORT - otherwise it could be confusing for people using different web servers. Theoretically this is a breaking change so I would like to get this in before v1.

[theimowski]

/cc @MangelMaxime

I grabbed the CONFIG object from Maxime's suggestions - I think the goal here was to design the webpack config so that the only place a user needs to configure is this CONFIG thing.

[theimowski]

I'm ok with added comments and renaming the environment variable name - should make things clearer.
Curious what @MangelMaxime says about the CONFIG object

[MangelMaxime]

The CONFIG object was an idea from Alfonso so people only need to modify this object and don't need to look at the whole webpack.config.js.

But I think, if you are using a template you should not need to modify the webpack.config.js at first. And when you need to modify it, this means you are going to not follow the default configuration and probably going to use advanced features and so learn/understand webpack.

So it's up to you depending on what you prefer. Personnaly, at work I don't have the CONFIG object and only have commonPlugins and babelOptions as variables in order to not declare twice the same things.

// Common/shared variables

var babelOptions = {
    presets: [
        ["@babel/preset-env", {
            "targets": {
                "browsers": ["last 2 versions"]
            },
            "modules": false,
            "useBuiltIns": "usage"
        }],
        "@babel/react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread"
    ]
};

var commonPlugins = [
    new HtmlWebpackPlugin({
        filename: './index.html',
        template: './Sources/index.html'
    }),
];

// Usage

module.exports = {
    // ...
    plugins: isProduction ?
        commonPlugins.concat([
            new MiniCssExtractPlugin({
                filename: 'style.[hash].css'
            })
        ])
        : commonPlugins.concat([
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin()
        ]),
    // ...
    module: {
        rules: [
            {
                test: /\.fs(x|proj)?$/,
                use: {
                    loader: "fable-loader",
                    options: {
                        babel: babelOptions
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: babelOptions
                },
            },
        ]
    }
    // ...
};

[theimowski]

Fair enough, let's inline that CONFIG object then. Merging - thanks @isaacabraham and @MangelMaxime