NodeJs is a pre-requisite to install webpack. Check here how to install NodeJs if you don’t have it installed already.

Next thing we need to do is to install webpack. We do it by running the following command:

npm install webpack

Once you get webpack installed, it is time to configure it and make yesod aware of the artifacts produced by it.

To configure webpack we need to add the webpack.config.js file into the project’s root folder. Here is the file content:

//file: $ROOT/webpack.config.js
var path = require('path');

module.exports = {
  //The entry point for the bundle.
  entry: './js/index.js',
  output: {
    //Name of the artifact produced by webpack.
    filename: 'bundle.js',
    //Locatian of the artifact - ./static/js
    path: path.join(__dirname, 'static', 'js')
  }
};

We’ll now create a javascript function that executes itself just to be sure that webpack is configured and working as expected.

To do so, we need to create a new folder called js and inside it a file called index.js

//file: $ROOT/js/index.js
(function() {
  'use strict';
  console.log("webpack is working.");
})();

Lets run the following command in a shell to tell webpack to create the bundle. Note that the command should be run from the project’s root folder.

webpack

If all succeed, you should see the bundle.js file inside the static/js folder.

Next step is to make yesod to use the bundle.js file. For this, we need to modify the Foundation.hs file as follows:

pc <- widgetToPageContent $ do
    addStylesheet $ StaticR css_bootstrap_css

    -- modification start
    -- this is an array of static js files that yesod will
    -- combine into one single js file and load it via a
    -- <script> tag.
    $(combineScripts 'StaticR
    [ js_bundle_js
    ])
    -- modification end

    $(widgetFile "default-layout")

The last thing is to make yesod aware that of changes in static folder so it can discover our new bundle.js file.

touch Settings/StaticFiles.hs

Run the project and go to http://localhost:3000

stack exec yesod devel

You should see, in the javascript console of your browser, the sentence: webpack is working.