A marko template loader for webpack.

Install required packages:

npm install marko --save
npm install marko-loader --save-dev

And then register the marko loader in your webpack configuration file:

webpack.config.js:

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.marko$/,
            loader: "marko-loader"
        }]
    }
};

With this loader installed, you can then require ./template.marko files as shown below:

./template.marko:

<div>
    <h1>Hello ${data.name}!</h1>
</div>

./index.js:

var template = require('./template.marko')
var html = template.renderToString({ name: 'Frank' });

marko-loader will automatically detect your webpack target and output the appropriately compiled Marko code. If you wish to override this behaviour simply add the target field in the options for this loader.

When rendering a Marko template serverside, only components that can re-render need their full template in the browser. This loader supports only loading the needed parts to hydrate with two options:

• ?dependencies includes only the dependencies that are needed in the browser (css, dynamic components)
• ?hydrate includes these dependencies and also kicks off hydration & component initialization

webpack.config.js:

module.exports = {
    entry: "./path/to/page.marko?hydrate",
    /* ... */
}

If you want to use a different marko compiler than the one that would be discovered from marko-loader, you can set the compiler option to the absolute path to the marko compiler you wish to use instead.

webpack.config.js:

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.marko$/,
            loader: "marko-loader",
            options: {
                compiler: require.resolve('marko/compiler')
            }
        }]
    }
};

• Sample app: marko-webpack

MIT