umijs / qiankun

📦 🚀 Blazing fast, simple and complete solution for micro frontends.
https://qiankun.umijs.org
MIT License
15.8k stars 2.01k forks source link

目前只能用parcel吗,如果我想我webpack该怎么配置 #8

Closed zeihang closed 5 years ago

kuitos commented 5 years ago

output libraryTarget 设置成 umd https://webpack.js.org/configuration/output/#outputlibrarytarget

jiachaosun commented 5 years ago

@kuitos 谢谢回复,我在output中加入了libraryTarget: "umd" ,然后用devServer方式启动,可是在main项目里点击后还是报相同的错误。

sub-app webpack config:

  output: {
    path: path.join(__dirname, "..", "dist"),
    chunkFilename: "[name].js",
    filename: "[name].js",
    publicPath: "",
    libraryTarget: "umd"
  },

sub-app index.js 也很简单

import React from "react";
import ReactDOM from "react-dom";

const App = () => <div>app</div>;

export async function bootstrap() {
  console.log("give web bootstraped");
}

export async function mount(props) {
  console.log("props from main framework", props);
  ReactDOM.render(<App />, document.getElementById("root"));
}

export async function unmount() {
  ReactDOM.unmountComponentAtNode(document.getElementById("root"));
}

错误信息:

index.js:56 Uncaught xxx web: Application 'xxx web' died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx web entry

zeihang commented 5 years ago

我是这么配置的

output: {
        filename: 'bundle.js',
        path: path.join(__dirname, './dist'),
        publicPath: '/',
        library: 'reactTs',
        libraryTarget: 'umd',
        umdNamedDefine: true
},

现在项目运行正常 @jiachaosun

zeihang commented 5 years ago

是因为我用typescript的缘故吗,我跑普通react项目还是会报错

jiachaosun commented 5 years ago

@zeihang 我用了你的配置后,确实跑成功了。不过只能是子项目每次yarn start后的第一次,一旦hot reload触发一次后容器项目就还是上面那种报错。

PS:回复内容时,你可以使用md格式贴代码哦,这样看起来舒服。

kuitos commented 5 years ago
{
  libraryTarget: 'umd',
  library: packageName,
  jsonpFunction: `webpackJsonp_${packageName}`
}

确保 webpack 有以上三个配置

kuitos commented 5 years ago

updated README, see https://github.com/umijs/qiankun#webpack

jiachaosun commented 5 years ago

thx,@kuitos 现在已经运行成功,我的sub app非常复杂是一个50个页面app的web版。但是sub app一旦hot reload一次后,就还是会报这个错,无论是修改css还是js

index.js:56 Uncaught xxx web: Application 'xxx web' died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx web entry

我猜测应该还是打包或者导出的问题,是否会和code split的格式有关系

zeihang commented 5 years ago

@ 跳子项目路由时没问题吗,我一跳转就会进入空白页面,热更新就没生效过

jiachaosun commented 5 years ago

@ 跳子项目路由时没问题吗,我一跳转就会进入空白页面,热更新就没生效过

子项目路由跳转没问题,空白的问题应该是你子项目路由router没加basename吧

guojingwen commented 5 years ago

@kuitos 使用webpack构建,开发没有问题,打包后 子项目js 加载正常但不会运行,也没有报错,

Measy commented 3 years ago
{
  libraryTarget: 'umd',
  library: packageName,
  jsonpFunction: `webpackJsonp_${packageName}`
}

确保 webpack 有以上三个配置

jsonpFunction在webpack5中不存在这个配置 会有问题吗? @kuitos

jeremy-ww commented 3 years ago
{
  libraryTarget: 'umd',
  library: packageName,
  jsonpFunction: `webpackJsonp_${packageName}`
}

确保 webpack 有以上三个配置

jsonpFunction在webpack5中不存在这个配置 会有问题吗? @kuitos

webpack5 是自动生成的,https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-unique-naming