mini-program-webpack-loader

基于 webpack 4.0 的小程序打包工具。

项目依赖 async/await, Set/Map, spread 等 es6+ 语法

安装

  $ npm i mini-program-webpack-loader --dev

介绍

该工具主要解决小程序难以集成更多的成熟工具的问题。其次支持多个小程序项目共建。

该工具由两部分组成，loader 和 plugin。

能力

• 支持在小程序项目中使用 webpack 的所有能力
• 支持在 wxml, wxss, wxs, json 文件中使用模块别名
• 支持全局注册自定义组件
• 支持多小程序项目合并
• 支持小程序项目分析

插件

使用

  const MiniPlugin = require('mini-program-webpack-loader').plugin;

  module.exports = {
    ..., // webpack 其他设置
    plugins: [
      new MiniPlugin({
        ... // 参数
      })
    ],
    ... // webpack 其他设置
  }

参数

关于插件的其他介绍可以访问 这里

Loader

关于 loader 的其他介绍可以访问 这里

关于 loader 的配置可以查看 这个示例

关于多项目共建

在这里共建的意思是：多个小程序项目的功能共用。其中包括页面，组件，工具函数的共用。

页面共用

通过 webpack 的 entry 设置多个 json 配置文件，插件根据这些文件进行解析依赖的页面和组件。对于不需要的配置可以通过插件配置来进行管理。

  module.exports = {
    entry: [
      'path/dir-one/src/app.json',
      'path/dir-two/src/app.json'
    ],
    ...,
    plugins: [
      new MiniPlugin({})
    ],
    ...
  }

在有多个不同的小程序项目，我们称第一个入口为主入口，像 ext.json 这样的文件将从从这个主入口对应的目录进行读取。

组件共用

组件共用主要借用 webpack 的 resolve.alias 的能力，在开发中我们只需要在 webpack 配置中设置相应的配置，即可在代码中使用绝对的路径加载文件。 下面以使用 path/dir-two 这个项目中的 base-component 组件为例，展示如何在另外个项目中使用它。

  const DIR_TWO = resolve(__dirname, 'DIR_TWO')
  module.exports = {
    entry: [
      'path/dir-one/app.json'
    ],
    resolve: {
      alias: {
        'project-two': DIR_TWO
      }
    },
    ...,
    plugins: [
      new MiniPlugin({
        // 这个配置即可保证 `dir-two` 目录下的文件正确的输出到希望输出的目录中
        resources: [
          DIR_TWO
        ]
      })
    ],
    ...
  }

在需要使用这个组件的地方使用即可

  {
    "usingComponents": {
      "base-component": "project-two/path/to/project-two/index"
    }
  }

辅助方法

• moduleOnlyUsedBySubpackages(module): Boolean 查询模块是否只在子包中使用
• moduleUsedBySubpackage(module, root): Boolean 查询模块是否在特定子包中使用
• moduleOnlyUsedBySubPackage(module, root): Boolean 查询模块是否只在特定子包使用
• pathInSubpackage(path): Boolean 查询指定路径是否在子包中
• getAssetContent(file, compilation): String 获取某个文件的内容
• getAppJson(): Object 获取最终的 app.json 内容