{"id":20083649,"url":"https://github.com/marko-js/webpack","last_synced_at":"2025-05-06T01:31:27.582Z","repository":{"id":35049581,"uuid":"173888107","full_name":"marko-js/webpack","owner":"marko-js","description":"A loader for marko files and a plugin for universal bundling","archived":false,"fork":false,"pushed_at":"2024-09-17T20:40:38.000Z","size":6863,"stargazers_count":13,"open_issues_count":25,"forks_count":4,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-01T00:05:41.221Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marko-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-05T06:27:59.000Z","updated_at":"2024-09-17T20:40:42.000Z","dependencies_parsed_at":"2024-06-18T19:51:35.961Z","dependency_job_id":"393e0967-cca4-4867-a088-0c43189af64f","html_url":"https://github.com/marko-js/webpack","commit_stats":{"total_commits":166,"total_committers":5,"mean_commits":33.2,"dds":"0.20481927710843373","last_synced_commit":"d5a2907ee63b77a3300d0daf448fe0a4ed8ff5fb"},"previous_names":[],"tags_count":75,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Fwebpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Fwebpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Fwebpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Fwebpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marko-js","download_url":"https://codeload.github.com/marko-js/webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252604281,"owners_count":21775077,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T15:48:12.824Z","updated_at":"2025-05-06T01:31:27.174Z","avatar_url":"https://github.com/marko-js.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003c!-- Logo --\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/1958812/62651340-98c0db00-b90d-11e9-944a-637334391d57.png\" height=\"118\"/\u003e\n  \u003cbr/\u003e\n  @marko/webpack\n\t\u003cbr/\u003e\n\n  \u003c!-- Stability --\u003e\n  \u003ca href=\"https://nodejs.org/api/documentation.html#documentation_stability_index\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/stability-stable-brightgreen.svg\" alt=\"API Stability\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Language --\u003e\n  \u003ca href=\"http://typescriptlang.org\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/%3C%2F%3E-typescript-blue.svg\" alt=\"TypeScript\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Format --\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/styled_with-prettier-ff69b4.svg\" alt=\"Styled with prettier\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- CI --\u003e\n  \u003ca href=\"https://travis-ci.com/marko-js/webpack\"\u003e\n  \u003cimg src=\"https://travis-ci.com/marko-js/webpack.svg?branch=master\" alt=\"Build status\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- NPM Version --\u003e\n  \u003ca href=\"https://npmjs.org/package/@marko/webpack\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@marko/webpack.svg\" alt=\"NPM Version\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Downloads --\u003e\n  \u003ca href=\"https://npmjs.org/package/@marko/webpack\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/@marko/webpack.svg\" alt=\"Downloads\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Size --\u003e\n  \u003ca href=\"https://npmjs.org/package/@marko/webpack\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/size-1.21kb-green.svg\" alt=\"Browser Bundle Size\"/\u003e\n  \u003c/a\u003e\n\u003c/h1\u003e\n\nA Marko plugin and loader for Webpack.\n\n# Details\n\n### Loader: `@marko/webpack/loader`\n\nThe loader portion of this module can be used standalone and simply transforms your Marko templates into the appropriate JavaScript depending on your webpack target.\n\nYou can override the output by adding a `target` option to the loader of `target: \"server\" | \"browser\"`.\n\n### Plugin: `@marko/webpack/plugin`\n\nThe plugin actually creates two separate webpack plugins, the `browser` plugin and the `server` plugin.\n\nThese are intended to be used in a isomorphic [webpack multi compiler](https://github.com/webpack/webpack/tree/master/examples/multi-compiler) where you are bundling both the server and the browser. The way it works is that the server plugin is going to analyze the top level Marko components in your server and automatically communicate with the browser compiler to retrieve the assets for that template.\n\nThis plugin also analyzes the top level Marko templates and determines if it is possible for them to rerender (currently the heuristic is simply does the component have an associated `class` or `component.js`). The plugin will automatically skip sending down any unnecessary top level templates to the browser.\n\nThe end result is that you setup a multi compiler (as shown below) and you can simply import Marko templates, and all assets are automatically generated and inlined into an optimized server response. No need to keep track of a webpack manifest yourself!\n\n### Tag: `\u003cwebpack-assets\u003e`\n\nThe `\u003cwebpack-assets\u003e` tag can be used along with the plugin in a multi-compiler setup. This tag allows you to inject `\u003cscript\u003e`/`\u003cstyle\u003e` tags into a server-rendered template for the assets of an entry in the client compiler.\n\n#### Example Usage\n\n```marko\n\u003cwebpack-assets entry=\"tracking\"/\u003e\n```\n\n#### Example Config\n\n```js\n// ...\nexport default [\n  {\n    entry: \"./server.js\",\n    plugins: [markoPlugin.server]\n    // ...\n  },\n  {\n    // ...\n    entry: {\n      tracking: \"./tracking.js\"\n    },\n    plugins: [markoPlugin.browser]\n  }\n];\n```\n\n# Installation\n\n\u003e `@marko/webpack` \u003e= 7 Only supports Marko 5+.\n\u003e For Marko 4 support use `@marko/webpack@6`.\n\n```console\nnpm install @marko/webpack\n```\n\n# Example\n\n```javascript\nimport MarkoPlugin from \"@marko/webpack/plugin\";\n\nconst markoPlugin = new MarkoPlugin();\n\nexport default [\n  {\n    entry: \"./server.js\",\n    module: {\n      rules: [\n        {\n          test: /\\.marko$/,\n          loader: \"@marko/webpack/loader\"\n        }\n      ]\n    },\n    plugins: [markoPlugin.server]\n  },\n  {\n    rules: [\n      {\n        test: /\\.marko$/,\n        loader: \"@marko/webpack/loader\"\n      },\n      // If using `style` blocks with Marko you must use an appropriate loader\n      {\n        test: /\\.css$/,\n        use: [\"style-loader\", \"css-loader\"]\n      }\n    ],\n    plugins: [markoPlugin.browser]\n  }\n];\n```\n\n## Babel options (Marko 5+)\n\nIf you are using Marko 5 with this plugin you can manually override the Babel configuration used by passing a `babelConfig` object along side the `@marko/webpack/loader`. By default Babels regular [config file resolution](https://babeljs.io/docs/en/config-files) will be used.\n\n```javascript\nexport default {\n    module: {\n      rules: [\n        {\n          test: /\\.marko$/,\n          loader: \"@marko/webpack/loader\",\n          options: {\n            babelConfig: {\n              presets: [\n                [\"@babel/preset-env\", { node: \"current\" }]\n              ]\n            }\n          }\n        }\n      ]\n    }\n  },\n```\n\n## Multiple client side compilers\n\nSometimes you need to have multiple compilers for your client side bundles. For example with [`i18n`](https://github.com/webpack/webpack/tree/master/examples/i18n) or [even shipping dynamic runtime bundles to the browser](https://github.com/eBay/arc/tree/master/packages/arc-webpack).\n\nThe Marko webpack browser plugin can be passed to multiple webpack compilers. At runtime you can provide a `$global.buildName` when rendering which will cause assets from the webpack compiler with that name to be included in the page.\n\nFor example with the webpack i18n plugin you might have a config like the following:\n\n```js\nimport MarkoPlugin from \"@marko/webpack/plugin\";\nimport I18nPlugin from \"i18n-webpack-plugin\";\n\nconst languages = {\n  en: null,\n  de: require(\"./de.json\")\n};\n\nconst markoPlugin = new MarkoPlugin();\n\nexport default [\n  {\n    name: \"Server\",\n    entry: \"./server.js\",\n    module: {\n      rules: [\n        {\n          test: /\\.marko$/,\n          loader: \"@marko/webpack/loader\"\n        }\n      ]\n    },\n    plugins: [markoPlugin.server]\n  },\n  ...Object.keys(languages).map(language =\u003e ({\n    name: `Browser-${language}`,\n    rules: [\n      {\n        test: /\\.marko$/,\n        loader: \"@marko/webpack/loader\"\n      },\n      // If using `style` blocks with Marko you must use an appropriate loader\n      {\n        test: /\\.css$/,\n        use: [\"style-loader\", \"css-loader\"]\n      }\n    ],\n    plugins: [new I18nPlugin(languages[language]), markoPlugin.browser]\n  }))\n];\n```\n\nWith the above config you can render your top level Marko template server side with a `$global.buildName`, like so:\n\n```javascript\ntemplate.render({ $global: { buildName: \"Browser-de\" } });\n```\n\nThis will automatically send assets for the German language.\nOf course in this case you'll want to conditionally send the appropriate assets given a users locale. This can be some simply, like so:\n\n```javascript\ntemplate.render({ $global: { buildName: `Browser-${req.language}` } });\n```\n\nNote: If a bundle with the provided name does not exist an error will be thrown.\n\n## Multiple copies of Marko\n\nIn some cases you may want to embed multiple isolated copies of Marko on the page. Since Marko relies on some `window` properties to initialize this can cause issues. For example, by default Marko will read the server rendered hydration code from `window.$components`. In Marko you can change these `window` properties by rendering with `{ $global: { runtimeId: \"MY_MARKO_RUNTIME_ID\" } }` as input on the server side.\n\nThis plugin exposes a `runtimeId` option produces output that automatically sets `$global.runtimeId` on the server side and initializes properly in the browser.\nThe `runtimeId` will default to the [`uniqueName` option](https://webpack.js.org/configuration/output/#outputuniquename) from the server compiler in the webpack config.\n\n```js\nimport MarkoPlugin from \"@marko/webpack/plugin\";\n\nconst markoPlugin = new MarkoPlugin({\n  runtimeId: \"MY_MARKO_RUNTIME_ID\" // default to webpack `output.uniqueName` option.\n});\n```\n\nNote: This option will also override the default values for the `jsonpFunction`, `chunkCallbackName` and `hotUpdateFunction` webpack `output` options, which all use global variables, to be prefixed with the `runtimeId`.\n\n## Dynamic public paths\n\nWhen using the plugin, the server will automatically sync the runtime [`__webpack_public_path__`](https://webpack.js.org/guides/public-path/#on-the-fly) with the browser.\nThis means that you only need to setup the dynamic public path on the server side.\n\n## Code of Conduct\n\nThis project adheres to the [eBay Code of Conduct](./.github/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarko-js%2Fwebpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarko-js%2Fwebpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarko-js%2Fwebpack/lists"}