如何在浏览器中配置 webpack -libraryTarget + splitChunks + require

我正在用 JS 为网页编写库，并通过 Webpack“编译”它。我需要在单独的 Webpack 项目中的页面上导入/需要（如 requirejs）这些库。库可以托管在两个单独的路径上 - 一个是相对路径，第二个是绝对路径。我如何配置 webpack 来导出可以在另一个项目中导入/需要的库？

我尝试了 umd、amd、window、this 等libraryTarget，在所有情况下，require 的响应未定义或抛出错误。

我的 libs webpack 配置：

const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let glob = require('glob'),
    entryObject = glob.sync('./src/js/*.js').reduce(
        function (entries, entry) {
            let matchForRename = /^\.\/src\/(.+)\.js$/g.exec(entry);

            if (matchForRename !== null && typeof matchForRename[1] !== 'undefined') {
                let entryName = matchForRename[1];

                if (typeof entries[entryName] !== 'undefined') {
                    entries[entryName].push(entry);
                } else {
                    entries[entryName] = [entry];
                }

            }

            return entries;
        }, {}
    );

module.exports = env => {
    return {
        devtool: env.production === 'true' ? false : 'eval-source-map',
        target: 'web',
        entry: entryObject,
        output: {
            chunkFilename: '[name].js',
            publicPath: 'dist/',
            libraryTarget: 'umd',
        },
        optimization: {
            splitChunks: {
                chunks: 'all',
                maxInitialRequests: Infinity,
                minSize: 0,
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name(module) {
                            // get the name. E.g. node_modules/packageName/not/this/part.js
                            // or node_modules/packageName
                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                            // npm package names are URL-safe, but some servers don't like @ symbols
                            return `js/npm/${packageName.replace('@', '')}`;
                        },
                    }
                },
            }
        },
        module: {
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            }, ]
        },
        plugins: [
            new CleanWebpackPlugin(),
            new CopyWebpackPlugin([{
                from: 'src/php',
                to: 'php'
            }], {
                copyUnmodified: true
            })
        ]
    }
};

在网页项目中我尝试了这样的事情（使用requirejs）：

window.require.config({
    baseUrl: '../../libs/',
    paths: {
        prod: 'http://example.com/libs/'
    }
});

window.require(['js/main'], function (main) {
        console.log(main);
    },
    function (err) {
        window.require(['prod/js/main'],
            function (main) {
                console.log(main);
            });
    }
);

或者仅通过 webpack：

import('../../libs/js/main.js').then(function (main) {
            console.log('ok');
        })
        .catch(function (error) {});
    try {
        require(['../../libs/js/main.js'], function (main) {
            console.log(main);
        }, function (error) {});
    } catch (error) {}
    try {
        define('../../libs/js/main.js', [], function () {
            console.log('ok');
        }, function (error) {
            console.log('error');
        });
    } catch (error) {}
    try {
        define(['../../libs/js/main.js'], function () {
            console.log('ok');
        }, function (error) {
            console.log('error');
        });
    } catch (error) {}
    try {
        define('main', ['../../libs/js/main.js'], function () {
            console.log('ok');
        }, function (error) {
            console.log('error');
        });
    } catch (error) {}

如果我不在 libs webpack conf 中使用优化选项，则 requirejs 工作正常，但如果使用优化 requirejs 返回 undefined :/。

类似问题：
如何配置 webpack - libraryTarget + splitChunks 以在另一个项目中导入块 https://stackoverflow.com/questions/59684261/how-to-config-webpack-librarytarget-splitchunks-to-import-chunks-in-another
具有自己的块依赖项的动态模块导入 https://stackoverflow.com/questions/55413594/dynamic-module-import-with-its-own-chunk-dependencies
导入/加载带块的库 https://stackoverflow.com/questions/48645670/importing-loading-library-with-chunks