pnpm monorepo 项目 打包异常（打包图片资源异常、treeshaking异常、配置mini.compile.include以后异常具体见下面描述）

[syyuan14]

相关平台

飞书小程序

使用框架: React

复现步骤

我使用pnpm 搭建了一个monorepo项目目录结构如下： apps/myApp（小程序app） packages/common-components（使用ts代码写的公共组件）

1. 问题一：当我在myApp 中引用common-components的组件时，会把这个下面的所有组件都打包进去，不会做treeshaking。
2. 问题二：当我在myApp 中引用common-components中使用图片的组件时，打包的时候不会把common-components中使用的图片打包在dist目录下，而是打包在和myApp同一个层级下面。
3. 问题三：由于common-components下的组件是使用ts写的，我想开启mini.compile.include 选项，使该部分能够得到编译时发现会编译失败提示:

ModuleParseError: Module parse failed: Unexpected token (18:12)
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
|   }
| 
>   protected async getAxiosPromise(config: MiniProgramApiConfig) {
|     const sendConfig = await this.getSendConfig(config);
|

;相反如果我不开启mini.compile.include 选项，common-components下的ts代码倒是可以正常编译

期望结果

图片打包路径正常、有treeshaking、配置mini.compile.include 后可以正常编译

实际结果

和期望结果相反

环境信息

👽 Taro v3.6.1

  Taro CLI 3.6.1 environment info:
    System:
      OS: macOS 12.5.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v14.19.0/bin/yarn
      npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.1 => 3.6.1 
      @tarojs/components: 3.6.1 => 3.6.1 
      @tarojs/helper: 3.6.1 => 3.6.1 
      @tarojs/plugin-framework-react: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-alipay: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-h5: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-jd: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-qq: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-swan: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-tt: 3.6.1 => 3.6.1 
      @tarojs/plugin-platform-weapp: 3.6.1 => 3.6.1 
      @tarojs/react: 3.6.1 => 3.6.1 
      @tarojs/runtime: 3.6.1 => 3.6.1 
      @tarojs/shared: 3.6.1 => 3.6.1 
      @tarojs/taro: 3.6.1 => 3.6.1 
      @tarojs/webpack5-runner: 3.6.1 => 3.6.1 
      babel-preset-taro: 3.6.1 => 3.6.1 
      eslint-config-taro: 3.6.1 => 3.6.1 
      react: ^18.0.0 => 18.2.0 

[shenstar]

老版本用webpack4至少图片资源路径是正常的，新版本升级后用5就都不正常了

[XLearner]

webpack 5 在资源模块有升级，可以看看官网的解决方法：https://webpack.docschina.org/guides/asset-modules#inlining-assets

[yuuk]

同遇到，webpack4填入外部引入的图片会生成到项目文件夹内，webpack5打包后生成的路径在项目外部

[yuuk]

看起里是webpack5的调整，可以手动把路径修正一下 https://github.com/webpack/webpack/issues/14392#issuecomment-1468814544

module: {
    rule: {
        fileLoader: {
            test: /\.(png|jpg|gif|svg)$/i,
            type: 'asset/resource',
            generator: {
                filename: (pathData) => {
                    const filenameArr = pathData.filename.split('/');
                    filenameArr.pop();
                    const path = filenameArr.join('/').replaceAll('..', '_');
                    return `${path}/[name]-[contenthash][ext]`;
                },
            },
        },
    },
}

或者当js模块解析

module: {
    rule: {
        fileLoader: {
            test: /\.(png|jpg|gif|svg)$/i,
            type: 'javascript/auto',
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name:'[path][name].[hash].[ext]',
                        esModule: false,
                    },
                },
            ],
        },
    },
}