webpack-miniapp-plugin

• 修正 tabBar 解析的bug

安装说明

npm install webpack-miniapp-plugin
// or
yarn add webpack-miniapp-plugin

使用示例

具体参考 test/webpack.config.js 文件。

module.exports = {
 output: {
  libraryTarget: 'var', // 必须
 },
 target: 'node', // 必须
 plugins: [
  new miniappPlugin(src, dist, options),
 ]
};

options 的参考：

const options = {
 main:                'app.json',
 mockMain:            'app.my.json', // 创建一个模拟入口
    debug:               false,
    assets:              'assets',
    assetsChunkName:     '__assets_chunk_name__',
    bootstrapModuleName: 'bootstrap.js',
    // 公共附件后缀名，以 object 结构，如果要去掉某类文件，value 取 false
    exts:                {
        json: true,
        wxml: true,
        wxss: false,
    },
    // 脚本后缀名
    scriptExts:          {js: true},
    // 需要检查 io stat 的文件后缀，wxss 不是必选项，可能存在 page 或者 component 没有 wxss 文件
    checkStatExts:       {wxss: true},
    // app.js - app.json 的特定附加文件。
    app:                 {
        exts:  {wxml: false},
        // 附加文件
        files: [ // 不附加文件的话，files: false
            'sitemap.json', 'project.config.json',
        ],
    },
    // page 范围内的设定
    page:                {
  // 使用公共的后缀文件名
        // exts: {wxml: true},
        files: [],
    },
    // component 范围内的设定
    component:           {
        // exts: {wxml: true},
        files: [],
    },
    // 自定义路径匹配指定附加文件
    custom:              {
  // 指定 pages/index/index 的附加设定
        'pages/index/index': {
          files: ['ok.json'],
        },
    },
}

引入依赖的路径写法

开发中引入 js 的路径，请严格遵照 npm 的标准，当前目录下的文件，应该是 require('./mobx') 或者 require('./any-module') ，require('loadsh') 表示引入 node_modules 下的 module。否则会导致 webpack 编译处理 js 的依赖关系时报错。

component 支持绝对路径和相对路径的两种写法：../../components/hello/world 或 /components/hello/world 。

已经支持检索 app.json 中的 pages, subPackages, tabBar ，以及各个 json 中定义的 useComponents 字段。

样式文件

通过JS引入的模式（推荐）

样式文件，推荐在对应的 js 文件中引入（require 或 import），这样的好处是，可以使用 mini-css-extract-plugin 或 extract-css-chunks-webpack-plugin ，来打包分离成对应的 wxss 文件，最终输出的效果更好。

loaders 可以参照如下的配置：

module.exports = {
 module: {
  rules: [
   {
        test: /\.styl$/,
        use:  [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'],
    },
    {
        test: /\.(css|wxss)$/,
        use:  [MiniCssExtractPlugin.loader, 'css-loader'],
    },
  ]
 }
}

复制wxss模式

如果你希望插件对待 wxss 文件时，作为附加文件的模式处理的话，也是可以的，需要做如下的设置：

const path = require('path');

module.exports = {
 module: {
  rules: [
    {
        test: /\.(wxss)$/,
        use:  {
            loader: 'file-loader',
            options: {
            name: (filename) => replaceDS(path.relative(srcPath, filename)), // 文件名路径名转换
            },
        },
    },
  ]
 },
 plugins: [
        new miniappPlugin(src, dist, {
         exts: {
          wxss: true, // 开启 wxss 作为附件打包
         }
        }),
    ]
};