0f5e639775
* add prettierignore * switch to eslint:recommended + eslint-config-prettier * fix eslint violations * remove more .jshintrc files * better conditional structure * add prettier and update prettier ignore * add precommit hook to run prettier * add lint check to precommit and format check to ci * format all the things * add generated files * let npm do it's thing with package.json
3.1 KiB
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-webpackdemo 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 })
]
};