{"id":13440146,"url":"https://github.com/tinajs/mina-webpack","last_synced_at":"2025-04-04T12:05:45.245Z","repository":{"id":39352003,"uuid":"109957363","full_name":"tinajs/mina-webpack","owner":"tinajs","description":":bento: Mina single-file-component meets Webpack","archived":false,"fork":false,"pushed_at":"2025-03-20T06:55:40.000Z","size":7186,"stargazers_count":91,"open_issues_count":10,"forks_count":20,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T11:06:23.349Z","etag":null,"topics":["loader","mina","mina-loader","mina-webpack","template-mina","tinajs","webpack","wechat","wechat-mini-program","weixin","wxml","wxs","wxss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinajs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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":"2017-11-08T09:49:29.000Z","updated_at":"2025-03-20T06:55:42.000Z","dependencies_parsed_at":"2023-10-17T01:55:40.744Z","dependency_job_id":"908929f8-578e-4c7f-a50c-46d9e0d34dc2","html_url":"https://github.com/tinajs/mina-webpack","commit_stats":{"total_commits":552,"total_committers":13,"mean_commits":42.46153846153846,"dds":"0.47282608695652173","last_synced_commit":"69db741155acdb7abfc7ac0d78cc372e4ee95087"},"previous_names":[],"tags_count":237,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinajs%2Fmina-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinajs%2Fmina-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinajs%2Fmina-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinajs%2Fmina-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinajs","download_url":"https://codeload.github.com/tinajs/mina-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174402,"owners_count":20896075,"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":["loader","mina","mina-loader","mina-webpack","template-mina","tinajs","webpack","wechat","wechat-mini-program","weixin","wxml","wxs","wxss"],"created_at":"2024-07-31T03:01:20.193Z","updated_at":"2025-04-04T12:05:45.226Z","avatar_url":"https://github.com/tinajs.png","language":"JavaScript","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"\u003ch1 align=\"center\"\u003emina-webpack\u003c/h1\u003e\n\u003cp align=\"center\"\u003e Mina single-file-component meets Webpack\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://github.com/tinajs/assets/raw/master/images/mina-webpack/equation.png\" /\u003e\u003c/p\u003e\n\n[![Build Status](https://travis-ci.org/tinajs/mina-webpack.svg?branch=master)](https://travis-ci.org/tinajs/mina-webpack)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Ftinajs%2Fmina-webpack.svg?type=small)](https://app.fossa.io/projects/git%2Bgithub.com%2Ftinajs%2Fmina-webpack?ref=badge_small)\n\n## Get Started\n\nWe recommend you to get started with [template-mina](https://github.com/tinajs/template-mina):\n\n```bash\nnpm i -g sao\n\nsao mina my-app\ncd my-app\nnpm start\n```\n\nAnd see how to use with [TinaJS](https://tinajs.github.io/tina/#/guide/package-management-and-build-tools)\n\n## Packages included\n\n- [mina-loader](./packages/mina-loader)\n\n  [![npm](https://img.shields.io/npm/v/@tinajs/mina-loader.svg?style=flat-square)](https://www.npmjs.com/package/@tinajs/mina-loader)\n  [![npm](https://img.shields.io/npm/dw/@tinajs/mina-loader.svg?style=flat-square)](https://www.npmjs.com/package/@tinajs/mina-loader)\n  [![license](https://img.shields.io/npm/l/@tinajs/mina-loader.svg?style=flat-square)](./LICENSE)\n\n- [mina-runtime-webpack-plugin](./packages/mina-runtime-webpack-plugin)\n\n  [![npm](https://img.shields.io/npm/v/@tinajs/mina-runtime-webpack-plugin.svg?style=flat-square)](https://www.npmjs.com/package/@tinajs/mina-runtime-webpack-plugin)\n  [![npm](https://img.shields.io/npm/dw/@tinajs/mina-runtime-webpack-plugin.svg?style=flat-square)](https://www.npmjs.com/package/@tinajs/mina-runtime-webpack-plugin)\n  [![license](https://img.shields.io/npm/l/@tinajs/mina-runtime-webpack-plugin.svg?style=flat-square)](./LICENSE)\n\n- [mina-entry-webpack-plugin](./packages/mina-entry-webpack-plugin)\n\n  [![npm](https://img.shields.io/npm/v/@tinajs/mina-entry-webpack-plugin.svg?style=flat-square)](https://www.npmjs.com/package/@tinajs/mina-entry-webpack-plugin)\n  [![npm](https://img.shields.io/npm/dw/@tinajs/mina-entry-webpack-plugin.svg?style=flat-square)](https://www.npmjs.com/package/@tinajs/mina-entry-webpack-plugin)\n  [![license](https://img.shields.io/npm/l/@tinajs/mina-entry-webpack-plugin.svg?style=flat-square)](./LICENSE)\n\n- [wxs-loader](./packages/wxs-loader)\n\n  [![npm](https://img.shields.io/npm/v/@tinajs/wxs-loader.svg?style=flat-square)](https://www.npmjs.com/package/@tinajs/wxs-loader)\n  [![npm](https://img.shields.io/npm/dw/@tinajs/wxs-loader.svg?style=flat-square)](https://www.npmjs.com/package/@tinajs/wxs-loader)\n  [![license](https://img.shields.io/npm/l/@tinajs/wxs-loader.svg?style=flat-square)](./LICENSE)\n\n## Manual Installation\n\n```bash\nnpm i --save-dev \\\n  @tinajs/mina-entry-webpack-plugin \\\n  @tinajs/mina-runtime-webpack-plugin \\\n  @tinajs/mina-loader \\\n  @tinajs/wxs-loader\n```\n\n## Simplest Usage\n\n**webpack.config.js**:\n\n```javascript\nconst webpack = require(\"webpack\");\nconst MinaEntryPlugin = require(\"@tinajs/mina-entry-webpack-plugin\");\nconst MinaRuntimePlugin = require(\"@tinajs/mina-runtime-webpack-plugin\");\nconst resolve = require(\"path\").resolve;\n\nmodule.exports = {\n  context: resolve(\"src\"),\n  entry: \"./app.mina\",\n  output: {\n    path: resolve(\"dist\"),\n    filename: \"[name]\",\n    publicPath: \"/\",\n    globalObject: \"wx\"\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.mina$/,\n        use: {\n          loader: \"@tinajs/mina-loader\",\n          options: {\n            loaders: {\n              script: \"babel-loader\"\n            }\n          }\n        }\n      },\n      {\n        test: /\\.wxs$/,\n        use: [\n          {\n            loader: '@tinajs/wxs-loader',\n            options: {\n              name: 'wxs/[name].[hash:6].[ext]',\n            },\n          },\n        ],\n      },\n    ]\n  },\n  plugins: [\n    new MinaEntryPlugin({\n      map: entry =\u003e [\"es6-promise/dist/es6-promise.auto.js\", entry]\n    }),\n    new MinaRuntimePlugin()\n  ],\n  optimization: {\n    splitChunks: {\n      chunks: 'all',\n      name: \"common.js\",\n      minChunks: 2,\n      minSize: 0\n    },\n    runtimeChunk: {\n      name: \"runtime.js\"\n    }\n  },\n  mode: \"none\"\n};\n```\n\n**app.mina**:\n\n```xml\n\u003cconfig\u003e\n{\n  \"pages\": [\n    \"page.mina\"\n  ]\n}\n\u003c/config\u003e\n\n\u003cscript\u003e\nrequire('./dependency.js')\nApp({\n  onLaunch () {\n    console.log(say({ text: 'Hello from App!' }))\n  }\n})\n\u003c/script\u003e\n```\n\n**page.mina**:\n\n```xml\n\u003cconfig\u003e\n{\n  \"window\":{\n    \"navigationBarTitleText\": \"Hello, World!\"\n  }\n}\n\u003c/config\u003e\n\n\u003cstyle\u003e\n.blue {\n  color: #00f;\n}\n\u003c/style\u003e\n\n\u003ctemplate\u003e\n  \u003cview\u003e\n    \u003ctext class=\"blue\"\u003e{{ msg }}\u003c/text\u003e\n  \u003c/view\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nrequire('./dependency.js')\nPage({\n  onLoad () {\n    this.setData({\n      msg: 'Hello from Page!',\n    })\n  },\n})\n\u003c/script\u003e\n```\n\n## Examples\n\n- [mina-webpack - Full Example](./example)\n- [mina-loader - test](./packages/mina-loader/test)\n- [wxs-loader - test](./packages/wxs-loader/test)\n- [TinaJS - HackerNews Reader](https://github.com/tinajs/tina-hackernews)\n\n## Related Projects\n\n### Best to use with\n\n- [TinaJS](https://github.com/tinajs/tina)\n\n### Scaffolds\n\n- [template-mina](https://github.com/tinajs/template-mina)\n- [ambar/new-mina](https://github.com/ambar/new-mina)\n\n### Other package compiler (also alternatives)\n\n- [gulp-mina](https://github.com/tinajs/gulp-mina)\n\n### Got inspiration from\n\n- [Cap32/wxapp-webpack-plugin](https://github.com/Cap32/wxapp-webpack-plugin)\n- [CantonJS/wxapp-boilerplate](https://github.com/cantonjs/wxapp-boilerplate)\n- [zezhipeng/mina-loader](https://github.com/zezhipeng/mina-loader)\n- [Vue - Single File Component](https://vuejs.org/v2/guide/single-file-components.html)\n\n[![](https://github.com/tinajs/assets/raw/master/images/banners/sponsored.png)](https://github.com/tinajs/tina)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinajs%2Fmina-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinajs%2Fmina-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinajs%2Fmina-webpack/lists"}