基于 webpack 的小程序构建工具

JavaScript 100.00%

mini-program-webpack-loader's People

Contributors

Stargazers

Watchers

mini-program-webpack-loader's Issues

在app.json中的usingComponents字段会在打包之后消失，导致全局组件无法加载，路径别名已配置正确，页面的index.json中配置usingComponents正常

手动通过entry.eccept.usingComponents字段设定打包之后app.json中也没有usingComponents，求解。

入口文件允许打包对应的 scss或less 文件

mini-program-webpack-loader/src/MiniProgram.js

Line 226 in a46e4cc

let entryFiles = getFiles(itemContext, fileName, ['.wxss'])

这里希望app.wxss可以允许可以修改为app.scss或app.less。如下:

let entryFiles = getFiles(itemContext, fileName, ['.wxss','.scss','.less'])

app.json里面的subPackages写法

app.json官方文档配置现在的分包字段使用了 subpackages 字段，虽然写成 subPackages 也支持。但作者这里只支持 subPackages写法。如果按照文档的写法写成 subpackages 打包出来是没有效果的。

1.x是不是用不了

我是从0.2开始用的一直没升级过

我刚才遇到问题尝试升级到1.x，但发现内存溢出

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

使用0.2.12的版本，在构建ts的时候依然会出现错误信息

webpack loader的配置如下：

{
    test: /\.ts$/,
    include: path.resolve(__dirname, '../plugin'),
    exclude: path.resolve(__dirname, '../node_modules'),
    use: [
      'cache-loader',
      'babel-loader',
      'ts-loader',
    ],
  },

在编译的时候提示：

src/miniprogram/app.js 不应该不存在

这个报错就很奇怪了，我把我的源码都改成了TS文件为啥校验的时候还去看JS后缀？

mini-program-webpack-loader/src/MiniPlugin.js

Line 195 in c82136d

 console.assert(assets[this.mainName + '.js'], `${join(this.mainContext, this.mainName + '.js')} 不应该不存在`) 

scss/less的配置不起作用

在rules里面新增了如下配置，但是不生效，是姿势不对么？

  {
    test: /\.less$/,
    use: [
      fileLoader('[path][name].wxss'),
      {
        loader: 'postcss-loader',
        options: {
          plugin: loader => [
            require('cssnano')(),
            require('autoprefixer')()
          ]
        }
      },
      'less-loader'
    ]
  },

请问可以支持一下抖音小程序的文件类型么？

想着用这个loader，配置抖音小程序开发脚手架，看了源码只支持支付宝和微信的文件后缀类型，希望支持一下抖音的后缀类型

请问为什么在生成模式打包后app.js的大小是0，文件内什么都没有，但是开发模式打包时正常的？

ts构建时报错：webpack配置不对

webpack关于ts的配置如下：

{
    test: /\.ts$/,
    include: path.resolve(__dirname, '../plugin'),
    exclude: path.resolve(__dirname, '../node_modules'),
    use: [
      'cache-loader',
      'babel-loader',
      'ts-loader',
    ],
  },

然后npm run dev的时候报错了，提示：

webpack 配置不对哦，该插件只支持 wxml, wxss, wxs, json 的

插件版本：1.0.1

对于通过npm安装的component有什么好的解决方案吗？

举例来说，我使用的weui-miniprogram就是通过npm安装的，我也希望这种第三方组件是通过npm管理，方便管理和维护，目前我的做法是在webpack这边配置alias：

weui: resolve('node_modules/weui-miniprogram/miniprogram_dist')

以上做法虽然也能正常将组件编译过去，但是会提示一些错误信息：

xxx路径错误：不应该还包含 node_modules

似乎源码里面还会因为这个原因最终导致部分资源不会编译完成？请问有什么好的解决方案吗？

span,i,p标签不可使用？

pages/index/index.wxml 中使用了未定义的自定义组件: span,i,p

嵌套组件编译不过去

比如 page 是一个组件，组件里有tabPage，tabPage里也会引用page组件

引用关系就是：
page.js
usingComponents -> ./tabPage.js

tabPage.js
usingComponents -> ./page.js

webpack就会一直挂机了
显示：webpack is watching the files…

我用了老版本的mini-program-webpack-loader 0.2.12 没问题
用1.x 都不行

其实这个问题我之前就提过没解决我就一直用的老的版本

我用react和react native 、umi 这样编译都可以通过，具体为啥不知道因为平时工作是开发接口 js不是很熟调过没解决

小程序的直播订阅组件编译不过去

Error: Can't resolve 'plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe.json'

{
  "component": true,
  "usingComponents": {
    "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"
  }
}

运行插件报错了

TypeError: Cannot read property 'updateHash' of undefined
    at getContentHash (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\mini-program-webpack-loader\src\helpers\calc-content-hash.js:18:10)
    at MiniProgramPlugin.hasChange (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\mini-program-webpack-loader\src\plugin\MiniProgramPlugin.js:200:25)
    at Object.keys.forEach.file (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\mini-program-webpack-loader\src\plugin\MiniProgramPlugin.js:228:30)
    at Array.forEach (<anonymous>)
    at MiniProgramPlugin.setEmitHook (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\mini-program-webpack-loader\src\plugin\MiniProgramPlugin.js:225:25)
    at _next1 (eval at create (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at _err1 (eval at create (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:39:1)
    at FileEntryPlugin.setEmitHook (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\mini-program-webpack-loader\src\plugin\FileEntryPlugin.js:173:5)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:35:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.emitAssets (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\webpack\lib\Compiler.js:491:19)
    at onCompiled (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\webpack\lib\Compiler.js:278:9)
    at hooks.afterCompile.callAsync.err (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\webpack\lib\Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\Hook.js:154:20)
    at compilation.seal.err (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\webpack\lib\Compiler.js:678:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\Hook.js:154:20)
    at hooks.optimizeAssets.callAsync.err (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\webpack\lib\Compilation.js:1423:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\Hook.js:154:20)
    at hooks.optimizeChunkAssets.callAsync.err (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\webpack\lib\Compilation.js:1414:32)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\Hook.js:154:20)
    at hooks.additionalAssets.callAsync.err (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\webpack\lib\Compilation.js:1409:36)
    at _err0 (eval at create (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at MiniProgramPlugin.additionalAssets (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\mini-program-webpack-loader\src\plugin\MiniProgramPlugin.js:391:5)
    at compilation.hooks.additionalAssets.tapAsync.callback (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\mini-program-webpack-loader\src\plugin\MiniProgramPlugin.js:153:87)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\46420\Desktop\TX-Project\sell-healper\node_modules\tapable\lib\Hook.js:154:20)

webpack 配置不对哦，该插件只支持 wxml, wxss, wxs, json

HI
大佬
这个插件我在使用过程中遇到点问题，按照文档推荐配置完成之后，运行报了标题上的错误。
在0.2.8版本上没有这个问题，最新版本一直都有这个问题
请问什么时候能修复一下呢？或者说目前有没有什么好的解决方法

如何复现：

只要在页面中引入了 axios，打包的时候就会报错

import axios from 'axios';

具体错误为：

Error: Can`t find file: ../node_modules/[email protected]@axios/package.json
    at FileTree.getFile (../node_modules/[email protected]@mini-program-webpack-loader/src/FileTree.js:240:15)

要重现这个错误的话，需要将 mini-program-webpack-loader/src/utils.js 中的第 40 行加一句容错处理：

path = (path || '').replace(/(\.\.\/)?/g, ($1) => $1 ? '_/' : '')

不支持绝对路径引入自定义组件？

"usingComponents": {
    "form-item": "/components/goodsRecordList/goodsRecordList"
}

这样会报错

Error: Can't resolve '/components/goodsRecordList/goodsRecordList.json'

希望可以增加wxss样式本地图片打包base64功能

因为微信小程序不支持样式引入本地图片，而有些小图标可能需要较快的加载速度而直接打包进本地，而使用了mini-program-webpack-loader不能自己去写url-loader分析并将图片转为base64。☹

TypeError: DomHandler is not a constructor

mini-loader-plugin-demo跑起来无法正常编译wxml，发现是html-mini-loader.js的domhandler有问题
const DomHandler = require('domhandler').default
加上.default就可以了

使用 webpack 的 callback 无效

// @see https://webpack.js.org/api/node/#webpack
webpack({/* 配置了mini-program-webpack-loader  */}, function(err, stats){
  /* ... */ // 这里不会执行到
});

webpack 配置示例

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

const fileLoader = name => ({
  loader: 'file-loader',
  options: {
    publicPath: '',
    context: path.resolve(__dirname, 'src'),
    name
  }
});

module.exports = {
  // 这里配置的是多个情况，单个也可以直接配置一个入口即可
  entry: [
    path.resolve(__dirname, 'src/A.json'),
    path.resolve(__dirname, 'src/B.json')
  ],
  output: {
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    // 你可以在 json wxml wxss scss 中使用这里配置的 alias
    alias: {
      src: path.resolve(__dirname, 'src'),
      pages: path.resolve(__dirname, 'src/pages'),
      utils: path.resolve(__dirname, 'src/utils'),
      components: path.resolve(__dirname, 'src/components')
    }
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: 'src/icons',
      to: 'icons'
    }]),
    new MiniPlugin({
      extfile: false,
      setSubPackageCacheGroup
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: path.resolve(__dirname, 'node_modules'),
        use: [
          // 'eslint-loader',
          'cache-loader',
          'babel-loader',
        ],
      },
      {
        test: /.wxml/,
        use: [
          fileLoader('[path][name].[ext]'),
          'mini-program-webpack-loader',
        ]
      },
      {
        test: /\.wxss$/,
        use: [
          fileLoader('[path][name].[ext]'),
          {
            loader: 'postcss-loader',
            options: {
              plugins: loader => [
                require('cssnano')()
              ]
            }
          },
          'mini-program-webpack-loader',
        ]
      },
      {
        test: /\.scss$/,
        use: [
          fileLoader('[path][name].wxss'),
          {
            loader: 'postcss-loader',
            options: {
              plugins: loader => [
                require('cssnano')(),
                require('autoprefixer')()
              ]
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /.wxs$/,
        use: [
          fileLoader('[path][name].[ext]'),
          'babel-loader',
          'mini-program-webpack-loader',
        ]
      },
      {
        test: /\.json/,
        type: 'javascript/auto',
        use: [
          fileLoader('[path][name].[ext]'),
          'mini-program-webpack-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        include: /src/,
        use: fileLoader('[path][name].[ext]')
      }
    ]
  }
};

movable-aera 应为 movable-area

mini-program-webpack-loader/src/platform/wx/wxml.js

Line 31 in 50103af

'movable-aera',

您使用的是什么编辑器？

webstorm可以通过定义wenpack文件来索引到某个目录，ctrl+鼠标左键即可进入
但是json文件是索引不过去的，请问您是如何索引的呢
这个不算问题哦，是个帮助
{
"usingComponents": {
"rate": "@/components/rate/index"
}
}

app.json中navigateToMiniProgramAppIdList字段未处理

全局app.json中，设置"navigateToMiniProgramAppIdList"字段，打包后，消失。

wxml中包含wxs构建文件异常，可以配置忽略wxml中含有内联wxs的情况么？

bug: tabBar icon add fail

mini-program-webpack-loader/src/MiniProgram.js

Line 253 in a46e4cc

 entrys.concat((tabBar && tabBar.list && getTabBarIcons(this.mainContext, tabBar.list)) || []) 

should be:
entrys = entrys.concat((tabBar && tabBar.list && getTabBarIcons(this.mainContext, tabBar.list)) || [])

这种需要用什么loader呢

export default class Exception {
    message;
    code;

    constructor(message, code) {
        console.log(message,code)
        this.message = message
        this.code = code
    }

    getCode() {
        return this.code
    }

    getMessage() {
        return this.message
    }
}

提示：
Module parse failed: Unexpected token (2:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default class Exception {

这种需要用什么loader呢，抱歉啊对webpack的loader不太了解