Importing a js file with the file-loader?

[marcofugaro]

I am trying to import a .js file with the file-loader to use it as a service worker:

import serviceWorkerUrl from './service-worker.js'

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register(serviceWorkerUrl)
}

Here is what I'm attempting to do in my webaìpack.config.js inside module.rules:

{
  test: /^service-worker\.(js|ts)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
      },
    },
    // ...ideally babel-loader here
  ],
}

However the service-worker.js is still treated as a modules, it is an object whhen I log it (I think because I'm not exporting anything)

How do I tell webpack to not treat that file as a module?

I've tried also excluding the service-worker.js from the babel-loader but nothing.

[alexander-akait]

It looks like you just deleted our lovely crafted issue template. It was there for good reasons. Please help us solving your issue by answering the questions asked in this template. I'm closing this. Please either update the issue with the template and reopen, or open a new issue.

Don't use file-loader for this case. Workbox webpack plugin for this purpose.