Simplify webpack sample config

[vbfox]

Maybe the webpack configuration shown should be simplified. This part specifically :

 var path = require("path");

 module.exports = {
     mode: "development",
     entry: "./src/App.fsproj",
-    output: {
-        path: path.join(__dirname, "./public"),
-        filename: "bundle.js",
-    },
-    devServer: {
-        contentBase: "./public",
-        port: 8080,
-    },
     module: {
         rules: [{
             test: /\.fs(x|proj)?$/,
             use: "fable-loader"
         }]
     }
 }

Webpack since v4 has a zero configuration mode with good defaults for most options. We can't be fully 0 conf as we need the F# module but we can get a simpler config.

Output by default is in ./dist and the dev server already serve the output folder on 8080 for example.

This will give less things to look at for people starting up and also unify Fable projects with the rest of the javascript ecosystem that is standardizing on these values.

[Zaid-Ajaj]

Hello Julien,

Thanks a lot for pointing this out. I agree this is much better and the less config, the better! Though it means that I will need to go look for all references in the book that mention ./public directory, replace them with './dist` and update all used samples accordingly.

[vbfox]

Yes there's quite a lot of place that reference ./public both in the text and in text-mode tree views 😥 so it would be quite a big change in number of places to check

[Zaid-Ajaj]

That's alright, I am working on it :smile: though according to devServer.contentBase the default directory is unfortunately not ./dist but just the current working directory from which the process starts, which means the config simplifies to:

const path = require("path")

module.exports = {
    entry: "./src/App.fsproj",
    devServer: {
        contentBase: path.join(__dirname, "./dist")
    },
    module: {
        rules: [{
            test: /\.fs(x|proj)?$/,
            use: "fable-loader"
        }]
    }
}

See updated elmish-getting-started

[Zaid-Ajaj]

Actually removing the mode: "developement" option results in a warning after compilation, do you suggest to keep it as is or change to mode: "none"?

[vbfox]

I think you should keep mode, it's unfortunate that it currently warn but it's because the change between old webpack where the node environment variable was used and now would have created to much surprise otherwise.

Current best practise would be to use the function form of the default export, take the mode from the arguments and provide a default value... Too complex here.

Another solution is to remove mode and then always provide it in command lines to webpack (in scripts)

[Zaid-Ajaj]

Current best practise would be to use the function form of the default export, take the mode from the arguments and provide a default value... Too complex here.

Agree, best practices will be explored later on so keeping here as simple as possible. I guess I will keep mode to just none to remove the warning

[Zaid-Ajaj]

Fixed!