https://github.com/tinajs/mina-webpack
:bento: Mina single-file-component meets Webpack
https://github.com/tinajs/mina-webpack
loader mina mina-loader mina-webpack template-mina tinajs webpack wechat wechat-mini-program weixin wxml wxs wxss
Last synced: 10 months ago
JSON representation
:bento: Mina single-file-component meets Webpack
- Host: GitHub
- URL: https://github.com/tinajs/mina-webpack
- Owner: tinajs
- Created: 2017-11-08T09:49:29.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-03-20T06:55:40.000Z (11 months ago)
- Last Synced: 2025-03-28T11:06:23.349Z (11 months ago)
- Topics: loader, mina, mina-loader, mina-webpack, template-mina, tinajs, webpack, wechat, wechat-mini-program, weixin, wxml, wxs, wxss
- Language: JavaScript
- Homepage:
- Size: 6.85 MB
- Stars: 91
- Watchers: 3
- Forks: 20
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- stars - tinajs/mina-webpack - file-component meets Webpack (HarmonyOS / Windows Manager)
README
mina-webpack
Mina single-file-component meets Webpack
[](https://travis-ci.org/tinajs/mina-webpack)
[](http://makeapullrequest.com)
[](https://app.fossa.io/projects/git%2Bgithub.com%2Ftinajs%2Fmina-webpack?ref=badge_small)
## Get Started
We recommend you to get started with [template-mina](https://github.com/tinajs/template-mina):
```bash
npm i -g sao
sao mina my-app
cd my-app
npm start
```
And see how to use with [TinaJS](https://tinajs.github.io/tina/#/guide/package-management-and-build-tools)
## Packages included
- [mina-loader](./packages/mina-loader)
[](https://www.npmjs.com/package/@tinajs/mina-loader)
[](https://www.npmjs.com/package/@tinajs/mina-loader)
[](./LICENSE)
- [mina-runtime-webpack-plugin](./packages/mina-runtime-webpack-plugin)
[](https://www.npmjs.com/package/@tinajs/mina-runtime-webpack-plugin)
[](https://www.npmjs.com/package/@tinajs/mina-runtime-webpack-plugin)
[](./LICENSE)
- [mina-entry-webpack-plugin](./packages/mina-entry-webpack-plugin)
[](https://www.npmjs.com/package/@tinajs/mina-entry-webpack-plugin)
[](https://www.npmjs.com/package/@tinajs/mina-entry-webpack-plugin)
[](./LICENSE)
- [wxs-loader](./packages/wxs-loader)
[](https://www.npmjs.com/package/@tinajs/wxs-loader)
[](https://www.npmjs.com/package/@tinajs/wxs-loader)
[](./LICENSE)
## Manual Installation
```bash
npm i --save-dev \
@tinajs/mina-entry-webpack-plugin \
@tinajs/mina-runtime-webpack-plugin \
@tinajs/mina-loader \
@tinajs/wxs-loader
```
## Simplest Usage
**webpack.config.js**:
```javascript
const webpack = require("webpack");
const MinaEntryPlugin = require("@tinajs/mina-entry-webpack-plugin");
const MinaRuntimePlugin = require("@tinajs/mina-runtime-webpack-plugin");
const resolve = require("path").resolve;
module.exports = {
context: resolve("src"),
entry: "./app.mina",
output: {
path: resolve("dist"),
filename: "[name]",
publicPath: "/",
globalObject: "wx"
},
module: {
rules: [
{
test: /\.mina$/,
use: {
loader: "@tinajs/mina-loader",
options: {
loaders: {
script: "babel-loader"
}
}
}
},
{
test: /\.wxs$/,
use: [
{
loader: '@tinajs/wxs-loader',
options: {
name: 'wxs/[name].[hash:6].[ext]',
},
},
],
},
]
},
plugins: [
new MinaEntryPlugin({
map: entry => ["es6-promise/dist/es6-promise.auto.js", entry]
}),
new MinaRuntimePlugin()
],
optimization: {
splitChunks: {
chunks: 'all',
name: "common.js",
minChunks: 2,
minSize: 0
},
runtimeChunk: {
name: "runtime.js"
}
},
mode: "none"
};
```
**app.mina**:
```xml
{
"pages": [
"page.mina"
]
}
require('./dependency.js')
App({
onLaunch () {
console.log(say({ text: 'Hello from App!' }))
}
})
```
**page.mina**:
```xml
{
"window":{
"navigationBarTitleText": "Hello, World!"
}
}
.blue {
color: #00f;
}
{{ msg }}
require('./dependency.js')
Page({
onLoad () {
this.setData({
msg: 'Hello from Page!',
})
},
})
```
## Examples
- [mina-webpack - Full Example](./example)
- [mina-loader - test](./packages/mina-loader/test)
- [wxs-loader - test](./packages/wxs-loader/test)
- [TinaJS - HackerNews Reader](https://github.com/tinajs/tina-hackernews)
## Related Projects
### Best to use with
- [TinaJS](https://github.com/tinajs/tina)
### Scaffolds
- [template-mina](https://github.com/tinajs/template-mina)
- [ambar/new-mina](https://github.com/ambar/new-mina)
### Other package compiler (also alternatives)
- [gulp-mina](https://github.com/tinajs/gulp-mina)
### Got inspiration from
- [Cap32/wxapp-webpack-plugin](https://github.com/Cap32/wxapp-webpack-plugin)
- [CantonJS/wxapp-boilerplate](https://github.com/cantonjs/wxapp-boilerplate)
- [zezhipeng/mina-loader](https://github.com/zezhipeng/mina-loader)
- [Vue - Single File Component](https://vuejs.org/v2/guide/single-file-components.html)
[](https://github.com/tinajs/tina)