Question

假设我有一个文件，我在其中初始化Firebase并导入其依赖项。

app.js

import firebase from 'firebase'

firebase.initializeApp()

现在我想引用 firebase-messaging-sw.js 的相同依赖项，但由于它需要在根目录中，我如何告诉Webpack解决依赖项？

果然我可以和

一起去

importScripts('https://www.gstatic.com/firebasejs/4.1.3/firebase.js')

但那会两次下载我的代码。

Answer 1

不清楚您要做什么，您是否正在尝试将远程加载的脚本视为Webpack依赖项？ Webpack的标准模块构建假定您导入的模块都是在构建时可用的本地文件。要将远程脚本视为依赖项，我建议在webpack中将其定义为external依赖项：https://webpack.js.org/configuration/externals/

在此externals配置的示例中（取自链接文档）：

externals: {
  jquery: 'jQuery'
}

...您将使用import jquery from "jquery"（使用您在externals配置中指定的键）引用jquery库。在运行时，webpack将查找名为jQuery的全局变量（externals配置中该键的值）。在这种情况下，Webpack不负责实际加载依赖关系，它假定您指定的全局变量将在运行时已定义-这就是为什么它们被称为“外部”依赖关系的原因-因此您必须加载依赖关系（ firebase库）在Webpack捆绑包之前。

Answer 2

此插件解决了我的问题。构建生产后，firebase-messaging-sw.js将复制到根文件夹

let config = {
  plugins: [
   ...,
    new CopyPlugin([
      {
        from: 'firebase-messaging-sw.js',
        to: 'firebase-messaging-sw.js'
      }
    ])
  ]
}

如果您具有多个具有不同环境的Service Worker文件。可能是这样

let config = {
  plugins: [
   ...,
    new CopyPlugin([
      {
        from: isProduction ? 'firebase-messaging-sw-prod.js' : 'firebase-messaging-sw.js',
        to: 'firebase-messaging-sw.js'
      }
    ])
  ]
}

使用Webpack

2 个答案: