mina-loader

MINA single-file-component loader for Webpack.

Inspired by zezhipeng/mina-loader.

Installation

npm i --save-dev @tinajs/mina-loader webpack@^4.0.0

Note you'll have to use webpack 4.

Usage

/**
 * webpack.config.js
 */
module.exports = {
  context: resolve('src'),
  mode: 'production',
  entry: {
    'app.mina': './app.mina',
    'pages/home.mina': './pages/home.mina',
  },
  output: {
    path: resolve('dist'),
    filename: '[name]',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.mina$/,
        use: {
          loader: '@tinajs/mina-loader',
          /**
           * see Options
           */
          options: {
            loaders: {
              script: 'babel-loader',
              style: {
                loader: 'postcss-loader',
                options: {
                  config: {
                    path: resolve('./postcss.config.js'),
                  },
                },
              },
            },
            languages: {
              less: 'less-loader',
            },
          },
        },
      },
    ],
  },
}

For the best particle, you might also be interested in mina-webpack.

Options

| Name | Default | Description | | ------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | loaders | { config: '', template: '', script: '', style: '' } | A map of Rules.use. See Webpack - Module - Rule.use for details. | | loaders.config | '' | The Rules.use for <config>. | | loaders.template | '' | The Rules.use for <template> | | loaders.script | '' | The Rules.use for <script> | | loaders.style | '' | The Rules.use for <style> | | languages | {} | Used in the .mina file with the lang attribute. A map of Rules.use. See Webpack - Module - Rule.use for details. | | extensions | { config: '.json', template: '.wxml', style: '.wxss' } | The extension names of the emitted files | | extensions.config | '.json' | The extension name of the file emitted with the <config> block | | extensions.template | '.wxml' | The extension name of the file emitted with the <template> block | | extensions.style | '.wxss' | The extension name of the file emitted with the <style> block | | transform | (ast) => ast | Function used to transform mina AST before emitting files. Useful for translate mina into another language, such as Alipay Mini Programs or pure web pages | | publicPath | output.publicPath | Useful for relative publicPath, see extract-loader - options | | enforceRelativePath | true | The same option enforceRelativePath in wxml-loader, see wxml-loader - Usage. It is highly recommended to keep the default. |

Example

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

License

Apache-2.0 © yelo, 2017 - present