mina-webpack

Mina single-file-component meets Webpack

Get Started

We recommend you to get started with template-mina:

npm i -g sao

sao mina my-app
cd my-app
npm start

And see how to use with TinaJS

Packages included

• mina-loader

  

• mina-runtime-webpack-plugin

  

• mina-entry-webpack-plugin

  

• wxs-loader

  

Manual Installation

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:

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:

<config>
{
  "pages": [
    "page.mina"
  ]
}
</config>

<script>
require('./dependency.js')
App({
  onLaunch () {
    console.log(say({ text: 'Hello from App!' }))
  }
})
</script>

page.mina:

<config>
{
  "window":{
    "navigationBarTitleText": "Hello, World!"
  }
}
</config>

<style>
.blue {
  color: #00f;
}
</style>

<template>
  <view>
    <text class="blue">{{ msg }}</text>
  </view>
</template>

<script>
require('./dependency.js')
Page({
  onLoad () {
    this.setData({
      msg: 'Hello from Page!',
    })
  },
})
</script>

Examples

• mina-webpack - Full Example
• mina-loader - test
• wxs-loader - test
• TinaJS - HackerNews Reader

Related Projects

Best to use with

• TinaJS

Scaffolds

• template-mina
• ambar/new-mina

Other package compiler (also alternatives)

• gulp-mina

Got inspiration from

• Cap32/wxapp-webpack-plugin
• CantonJS/wxapp-boilerplate
• zezhipeng/mina-loader
• Vue - Single File Component