Webpack 在构建时不呈现任何标记逻辑

如何解决Webpack 在构建时不呈现任何标记逻辑

我有一个带有自定义 webpack(v5) 配置的微前端应用程序，带有 react、typescript 和模块联合插件。在开发模式下一切正常。此外，构建的项目在导入并呈现到微前端容器应用中时运行良好（容器应用将所有微前端应用连接在一起）。

但是，当执行构建并且我尝试在本地运行生产构建时，使用 serve -s dist -p 9997，我只会得到一个没有标记呈现的空白页面。（为长帖提前道歉）：

webpack 构建配置文件

module.exports = {
    resolve: {
        extensions: [".ts",".tsx",".js","jsx"],// file extensions we allow webpack to evaluate
    },mode: "production",output: {
        filename: "[name].[contenthash].js",clean: true,},module: {
        rules: [
            {
                test: /\.tsx?$/,exclude: /node_modules/,use: {
                    loader: "babel-loader",options: {
                        presets: [
                            // "@babel/preset-env","@babel/preset-react","@babel/preset-typescript",],plugins: ["@babel/plugin-transform-runtime"],plugins: [
        new ModuleFederationPlugin({
            name: "microfrontend_app",// name of the app used by the container to get the app code
            filename: "remoteEntry.js",// name of the file this app sends to the container - DO NOT CHANGE.
            exposes: {
                "./MicrofrontendApp": "./src/bootstrap",// alias,lets the container app import this app as a module with name PortalNavigationApp
            },shared: packageJson.dependencies,}),new HtmlWebpackPlugin({
            template: "./public/index.html",};

webpack 开发配置文件

module.exports = {
    mode: "development",resolve: {
        extensions: [".ts",devServer: {
        port: 9998,historyApiFallback: {
            index: "/index.html",};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title1</title>
</head>
<body>
    <div id="_microfrontend-app"></div>
</body>
</html>

App.tsx

export default ({ history }: IApp): JSX.Element => {
    console.log('loading App.tsx');
    return (
        <MainWrapper>
            <Router history={history as unkNown as H.History}>
                <h1>hello from wellcom template app</h1>
            </Router>
        </MainWrapper>
    );
};

const MainWrapper = styled.main``;

bootstrap.tsx

const mount = (
    el: Element,{
        onNavigate,defaultHistory,initialPath,}: {
        onNavigate: (() => void) | null;
        defaultHistory: any;
        initialPath: string | null;
    }
): unkNown => {
    // if in development and isolation,use browser history. If not,use memory history
    const history =
        defaultHistory ||
        createMemoryHistory({
            initialEntries: [initialPath || ""],});
    if (onNavigate) {
        history.listen(onNavigate);
    }

    ReactDOM.render(<App history={history} />,el);

    return {
        onParentNavigate({ pathname: nextPathName }: { pathname: string }) {
            const { pathname } = history.location;

            //prevent infinite routing loop
            if (pathname !== nextPathName) {
                history.push(nextPathName);
            }
        },};
};

// If we are in development and in isolation call mount immediately
if (process.env.NODE_ENV === "development") {
    const devRoot = document.querySelector("#_microfrontend-app");

    if (devRoot) {
        mount(devRoot,{
            defaultHistory: createbrowserHistory(),initialPath: null,onNavigate: null,});
    }
}

export { mount };

index.ts

import("./bootstrap");

这是我运行 webpack.dev.js 时得到的输出：

这是我使用 serve -s dist -p 9997 运行 webpack 构建和服务后得到的输出：

我就是不明白为什么会发生这种情况。这是我的 dist 文件夹的输出：

index.html 正确附加了 main.975.... js 文件。如果我在所有 js 文件中执行 CTRL+F 查找“来自 App.tsx 的你好”，我会在 499.63...js 中找到它。所以标记逻辑存在于构建中。

此外，main.975 js 文件似乎聚合了所有其他 js 文件：

我只是不明白为什么标记没有在构建版本中呈现？我怀疑 webpack prod 文件中缺少某些内容。我试图搜索 create-react-app webpack 文件进行比较，但那里的东西太多了，我完全迷失了。

解决方法

想通了。非常愚蠢，但在 bootstrap.tsx 中，如果 development = 'production'，则永远不会调用 mount 函数。

所以只需删除

if (process.env.NODE_ENV === "development") {
...
}

如果检查使它工作。

Webpack 在构建时不呈现任何标记逻辑

如何解决Webpack 在构建时不呈现任何标记逻辑

解决方法

相关推荐