webpack - transpile 1 ts file without bundling it (2 entries)

Question

---

TL;DR

(vue files) + background.ts => ...[webpack]... => (bundled vue files) + background.js

• can't execute background.js

• expected background.js to contain only "console.log('test');"

---

I have a vue project with webpack and typescript.

I want my build step to produce a "background.js" file aside from the [vue JS related files].

I have a source file in typescript: "background.ts".

Through the vue.config.js I added a webpack entry "background".

It does build a file "background.js" as I expected

but it is bundled(I think) and it can't be executed by a chrome plugin.

For now all I want is to have a "background.js" file which execute the "console.log('test');" instruction it contains when the script is called.

Thank you, webpack is hell

---

edit: adding files:

// vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    filenameHashing: false,
    chainWebpack: config => {
        // add your custom entry point
        config
            .entry('background')
            .add('./src/background.ts');
    },
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                { from: 'manifest.json', to: 'manifest.json', flatten: true },
            ]),
        ]
    }
}

---

content of "$vue inspect" $vue inspect > https://pastebin.com/6F3zwLhC

---

What I tried:

• exporting a function instead of my plain code:

  export default function() {
      console.log("gboDebug: background.ts dans export function");
  }
  

  // instead of just

  console.log("gboDebug: background.ts dans export function");
  

• at the end of the file adding this because I saw it somewhere:

     export default null;
  

• checked that my console.log was in the background.js bundled file

• pasted the result of background.js in the navigator
• played with the webpackJsonp global var the scripts creates

What I thought about:

• having a npm script which 1-bundle-vue-webpack and then 2-transpile my file with babel-loader
• playing with the library output option in webpack but I think it makes code available for use in a variable, it doesn't auto-execute code when loaded
  • webpack output in IIFE: https://webpack.js.org/configuration/output/#outputiife

Answer 1

In short – you don't need a bundler for transpiling a single typescript file. Just use tsc.

Specifically to this question where the Vue app is used as part of chrome extension, it may make sense to separate building an app and the extension related files.

Another possible option is to use something like Vue CLI Browser Extension Plugin.