Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
150 lines (117 sloc) 3.07 KB

Marko + Webpack

The marko-loader loader for Webpack will automatically compile all imported Marko templates during bundling. In addition, marko-loader will automatically bundle any template dependencies (including required CSS).

ProTip: Want to see it in action? Check out the marko-webpack demo repository.

Installation

npm install marko --save
npm install webpack --save
npm install marko-loader --save

Client rendering

Let's say we have a simple view that we want to render in the browser: hello.marko

hello.marko

<h1>Hello ${input.name}</h1>

First, let's create a client.js that requires the view and renders it to the body:

client.js

var myComponent = require("./hello.marko");

myComponent.renderSync({ name: "Marko" }).appendTo(document.body);

Now, let's configure webpack to compile the client.js file and use marko-loader for any *.marko files:

webpack.config.js

module.exports = {
  entry: "./client.js",
  output: {
    path: __dirname,
    filename: "static/bundle.js"
  },
  resolve: {
    extensions: [".js", ".marko"]
  },
  module: {
    loaders: [
      {
        test: /\.marko$/,
        loader: "marko-loader"
      }
    ]
  }
};

Run webpack from your terminal and you'll have a new static/bundle.js file created. Reference that from an html file and you're good to go.

index.html

<!DOCTYPE html>
<html>
  <body>
    <script src="static/bundle.js"></script>
  </body>
</html>

Load up that page in your browser and you should see Hello Marko staring back at you.

Using CSS pre-processors

If you're using inline css with pre-processors, you must configure the appropriate loader.

pretty.marko

style.less {
    .pretty {
        color:@pretty-color;
    }
}

<div.pretty/>

webpack.config.js

//...
loaders: [
  //...
  {
    test: /\.less$/, // matches style.less { ... } from our template
    loader: "style-loader!css-loader!less-loader!"
  }
  //...
];
//...

Extracting CSS

It is recommended to configure the ExtractTextPlugin so that you get a separate css bundle rather than it being included in the JavaScript bundle.

npm install extract-text-webpack-plugin --save

webpack.config.js

"use strict";
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: "./client.js",
  output: {
    path: __dirname,
    filename: "static/bundle.js"
  },
  resolve: {
    extensions: [".js", ".marko"]
  },
  module: {
    loaders: [
      {
        test: /\.marko$/,
        loader: "marko-loader"
      },
      {
        test: /\.(less|css)$/,
        loader: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader!less-loader"
        })
      }
    ]
  },
  plugins: [
    // Write out CSS bundle to its own file:
    new ExtractTextPlugin("static/bundle.css", { allChunks: true })
  ]
};