javascript - 将 firebase-messaging-sw.js deps 与 Webpack 捆绑在一起

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

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

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

如果您有超过 1 个具有不同环境的服务 worker 文件。可以这样

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