1 | # Marko + Webpack
|
2 |
|
3 | The [@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 | ```
|
10 | npm install marko
|
11 | npm install webpack @marko/webpack --save-dev
|
12 | ```
|
13 |
|
14 | ## Client rendering
|
15 |
|
16 | Let'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 |
|
24 | First, let's create a `client.js` that requires the view and renders it to the body:
|
25 |
|
26 | _client.js_
|
27 |
|
28 | ```js
|
29 | import MyTemplate from "./hello.marko";
|
30 |
|
31 | MyTemplate.renderSync({ name: "Marko" }).appendTo(document.body);
|
32 | ```
|
33 |
|
34 | Now, 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
|
39 | module.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 |
|
59 | 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.
|
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 |
|
72 | Load up that page in your browser and you should see `Hello Marko` staring back at you.
|
73 |
|
74 | ## Using CSS pre-processors
|
75 |
|
76 | If you're using inline css with pre-processors, you must configure the appropriate loader.
|
77 |
|
78 | _pretty.marko_
|
79 |
|
80 | ```marko
|
81 | style.less {
|
82 | .pretty {
|
83 | color:@pretty-color;
|
84 | }
|
85 | }
|
86 |
|
87 | <div.pretty/>
|
88 | ```
|
89 |
|
90 | _webpack.config.js_
|
91 |
|
92 | ```js
|
93 | //...
|
94 | module: {
|
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 |
|
109 | It 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 | ```
|
112 | npm install mini-css-extract-plugin --save-dev
|
113 | ```
|
114 |
|
115 | _webpack.config.js_
|
116 |
|
117 | ```js
|
118 | const CSSExtractPlugin = require("mini-css-extract-plugin");
|
119 |
|
120 | module.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 | ```
|