时间戳

首页 > 解决方案 > 来自 CDN 的 Webpack 外部，用于 UMD 应用程序

webpack - 来自 CDN 的 Webpack 外部，用于 UMD 应用程序

问题描述

我正在尝试配置 Webpack 外部，以便我的一些部门不会最终出现在我的 UMD 应用程序的捆绑包中。我已经阅读了有关外部 CDN https://webpack.js.org/configuration/externals/的文档，但是我的印象是，当输出中的库目标为“UMD”时，该选项不起作用：

output: {
        filename: 'scripts/[name].js',
        path: path.resolve(__dirname, '../build/'),
        libraryTarget: 'umd'
    }

这是我期望它的工作方式：

externals: {
    'lodash': ['https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js', '_']
}

但是每当我配置这个时，我都会遇到构建错误：

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@2.8.5 build:dev: `npx webpack --config ./config/webpack.config.dev.js`
npm ERR! Exit status 1

只是为了提供更多背景信息：我正在与许多不同供应商合作的网站上工作，我和我的团队已经构建了在该网站上运行的多个应用程序。我们一直在开发的那些应用程序使用一些常见的库，例如 lodash/jquery/moment/...，有时这些库的版本完全相同，所以我想使用 CDN，而不是在这些单独的应用程序中捆绑相同的代码。这将允许最终用户只加载一次库。

到目前为止，我们已经在使用 requirejs，其中一些配置可以让我们实现这一点。例如，这个 lodash 需要配置：

 window.requirejs.config({
            paths: {
                'lodash': '//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min'
            }
        });

我可以很容易地在 webpack 中使用 lodash 作为外部：

externals: {
    'lodash': 'lodash'
}

而且效果很好......但是我的目标是在库版本方面真正灵活，这就是为什么我试图将 CDN 直接添加到 webpack 外部配置中。

提前感谢您的帮助:-)

webpack 版本 4.42.0

标签： webpackrequirejscdnwebpack-4webpack-externals

解决方案

推荐阅读