Awesome
<h1 align="center">mina-webpack</h1> <p align="center"> Mina single-file-component meets Webpack</p> <p align="center"><img src="https://github.com/tinajs/assets/raw/master/images/mina-webpack/equation.png" /></p>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
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>