Webpack stuck at 'wait until bundle finished: /'

webpack.app.js から始め、patternlab: serve を使って問題を再現し、その動作を正常に動作する patternlab:build タスクと比較します。webpack が / と /sw.js に対して “wait until bundle finished” のままになる理由を追跡します。serve タスクがバンドルを完了し、正常に起動すれば完了です。

I found the following issue:

When I try to start patternlab with patternlab: serve, my webpack is stuck at these two messages:

i ｢wdm｣: wait until bundle finished: /
i ｢wdm｣: wait until bundle finished: /sw.js

This is my webpack.app.js

const webpack = require("webpack");
const {
    getIfUtils
} = require("webpack-config-utils");
const {
    resolve
} = require("path");
const globby = require("globby");
const plConfig = require("../../patternlab-config.json");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = env => {
    const {
        ifProduction,
        ifDevelopment
    } = getIfUtils(env);
    const appNamespace = plConfig.app.namespace ?
        `$ns:${plConfig.app.namespace};` :
        ``;
    const app = {
        entry: {
            "css/styles": globby.sync(
                [
                    resolve(`${plConfig.paths.source.css}scss/*.scss`),
                ], {
                    gitignore: true
                }
            )
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        test: /node_modules/,
                        chunks: "initial",
                        name: "css/sample-project-vendor",
                        priority: 10,
                        enforce: true
                    }
                }
            }
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "[name].css",
                disable: ifDevelopment()
            }),
            new webpack.DefinePlugin({
                NAMESPACE: appNamespace
            })
        ],
        module: {
            rules: [{
                    test: /\.scss$/,
                    use: [{
                            loader: ifDevelopment(
                                "style-loader",
                                MiniCssExtractPlugin.loader
                            )

                        },
                        {
                            loader: "css-loader"
                        },
                        {
                            loader: "postcss-loader",
                            options: {
                                sourceMap: ifDevelopment(),
                                plugins: loader => [
                                    // eslint-disable-line no-unused-vars
                                    require("autoprefixer"),
                                    require("postcss-flexbugs-fixes")
                                ]
                            }
                        },
                        {
                            loader: "sass-loader",
                            options: {
                                sourceMap: ifDevelopment(),
                                sassOptions: {
                                    precision: 3,
                                    outputStyle: ifProduction(
                                        "compressed",
                                        "expanded"
                                    ),
                                    prependData: appNamespace
                                }
                            }
                        },
                        {
                            loader: "import-glob-loader"
                        }
                    ]
                },
                {
                    test: /\.(woff|woff2|ttf|otf)$/,
                    loader: 'file-loader',
                    include: [/fonts/],

                    options: {
                        name: '[hash].[ext]',
                        outputPath: 'css/',
                        publicPath: url => '../css/' + url
                    }
                },
                {
                    test: /\.(png|jp(e*)g|svg)$/,
                    use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 8000, // Convert images < 8kb to base64 strings
                            name: 'images/[hash]-[name].[ext]'
                        }
                    }]
                }
            ]
        }
    };
    return app;
};

The 'patternlab:build' works fine