7

I have cross-browser extension (currently running it on Chrome and Firefox) build with typescript and compiled with webpack. I wanted to use code-splitting to reduce the size of the bundle. However when I enable code-splitting in the webpack config, extension is not working. In the background script there is a browserAction listener that will open the login page if there is no user. Or if user is logged in, popup will show up. However clicking the browser action icon do nothing. No error messages will show up in background script. No login window or popup will show up.

Here is to config part I'm having problem with. When I comment this part out and do not code-split everything is working fine. 

module.exports = {
    mode: 'development',
    entry: {
        login: path.join(__dirname, './src/js/login.ts'),
        popup: path.join(__dirname, './src/js/popup.ts'),
        options: path.join(__dirname, './src/js/options.ts'),
        background: path.join(__dirname, './src/js/background.ts'),
    },
    output: {
      path: path.join(__dirname, './dist'),
      filename: 'js/[name].js'
    },
    // When I remove this part extension is working
    optimization: {
      splitChunks: {
        name: 'vendor',
        chunks: "initial"
      }
    },
    module: {
    ...

Any idea why is this happening and how can I make it work? In the result vendor chunk, there are mainly node_modules dependencies (firebase, ramda etc.) used by several entry points of the extension.

Thank you for help.

Tomáš Pustelník
  • 523
  • 4
  • 10
  • "extension is not working" is too vague, could you debug and clarify what happens exactly? – wOxxOm Jan 29 '19 at 16:17
  • 1
    @wOxxOm fill in more details. There isn't truly much I can add. – Tomáš Pustelník Jan 30 '19 at 12:34
  • Try debugging it, like set a breakpoint in the code (at the start of the script for example), reload the page and see what happens when you run it step by step or in chunks via "run to cursor". – wOxxOm Jan 30 '19 at 12:42

1 Answers1

2

I'm having the same problem, and I think it's related to the background.js file.

Let's assume that you login entry is intended to be used in a login.html page, and that login.ts is split into login.js and 547.js (with this later contained all shared code between all entries). When HtmlWebpackPlugin builds the HTML file, it will automatically include into the <header> both login.js and 547.js, since it "knows" that 547.js it's a dependency from login.js.

However, background.js it's a service worker, hence isn't included in a HTML page, so their dependencies are never loaded anywhere, since for that you should have some another plugin that automatically adds the line loadScript(547.js) at the beginning of background.js.

At the end, I just excluded background to be split:

    splitChunks: {
      chunks(chunk) {
        return chunk.name !== 'background';
      },
    },
user15896802
  • 21
  • 3