UNPKG

3.03 kBMarkdownView Raw
1# Marko + Webpack
2
3The [@marko/webpack/loader](https://github.com/marko-js/webpack##loader-markowebpackloader) loader for [Webpack](https://webpack.github.io/) will automatically compile all imported Marko templates during bundling. In addition, it will automatically bundle any template dependencies (including required CSS).
4
5> **ProTip**: Want to see it in action? Check out the [`marko-webpack`](https://github.com/marko-js-samples/marko-webpack) demo repository.
6
7## Installation
8
9```
10npm install marko
11npm install webpack @marko/webpack --save-dev
12```
13
14## Client rendering
15
16Let's say we have a simple view that we want to render in the browser: `hello.marko`
17
18_hello.marko_
19
20```marko
21<h1>Hello ${input.name}</h1>
22```
23
24First, let's create a `client.js` that requires the view and renders it to the body:
25
26_client.js_
27
28```js
29import MyTemplate from "./hello.marko";
30
31MyTemplate.renderSync({ name: "Marko" }).appendTo(document.body);
32```
33
34Now, let's configure `webpack` to compile the `client.js` file and use `@marko/webpack/loader` for any `*.marko` files:
35
36_webpack.config.js_
37
38```js
39module.exports = {
40 entry: "./client.js",
41 output: {
42 path: __dirname,
43 filename: "static/bundle.js"
44 },
45 resolve: {
46 extensions: [".js", ".marko"]
47 },
48 module: {
49 rules: [
50 {
51 test: /\.marko$/,
52 loader: "@marko/webpack/loader"
53 }
54 ]
55 }
56};
57```
58
59Run `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.
60
61_index.html_
62
63```html
64<!DOCTYPE html>
65<html>
66 <body>
67 <script src="static/bundle.js"></script>
68 </body>
69</html>
70```
71
72Load up that page in your browser and you should see `Hello Marko` staring back at you.
73
74## Using CSS pre-processors
75
76If you're using inline css with pre-processors, you must configure the appropriate loader.
77
78_pretty.marko_
79
80```marko
81style.less {
82 .pretty {
83 color:@pretty-color;
84 }
85}
86
87<div.pretty/>
88```
89
90_webpack.config.js_
91
92```js
93//...
94module: {
95 rules: [
96 //...
97 {
98 test: /\.less$/, // matches style.less { ... } from our template
99 use: ["style-loader", "css-loader", "less-loader"]
100 }
101 //...
102 ];
103}
104//...
105```
106
107## Extracting CSS
108
109It is recommended to configure the [`MiniCSSExtractPlugin`](https://webpack.js.org/plugins/mini-css-extract-plugin) so that you get a separate css bundle rather than it being included in the JavaScript bundle.
110
111```
112npm install mini-css-extract-plugin --save-dev
113```
114
115_webpack.config.js_
116
117```js
118const CSSExtractPlugin = require("mini-css-extract-plugin");
119
120module.exports = {
121 entry: "./client.js",
122 resolve: {
123 extensions: [".js", ".marko"]
124 },
125 module: {
126 rules: [
127 {
128 test: /\.marko$/,
129 loader: "@marko/webpack/loader"
130 },
131 {
132 test: /\.(less|css)$/,
133 use: [CSSExtractPlugin.loader, "css-loader", "less-loader"]
134 }
135 ]
136 },
137 plugins: [
138 // Write out CSS bundle to its own file:
139 new CSSExtractPlugin({
140 filename: "[name].css"
141 })
142 ]
143};
144```