In summary...
When my Vue files are combined with background.ts, webpack processes them to create bundled vue files along with background.js
I'm unable to run the background.js script
I expected background.js to only contain "console.log('test');
I have a Vue project with webpack and TypeScript.
My goal is to generate a separate "background.js" file during the build process, in addition to the [Vue JS related files].
I have a typescript source file named "background.ts".
In vue.config.js, I added a webpack entry called "background".
Although it does create a "background.js" file as intended,
it seems to be bundled and cannot be executed by a Chrome plugin.
Right now, I simply want a "background.js" file that executes the instruction "console.log('test');" when called.
Thank you, webpack can be quite tricky!
Edit: Including 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've attempted:
Exporting a function rather than plain code:
export default function() { console.log("gboDebug: background.ts dans export function"); }// Instead of just
console.log("gboDebug: background.ts dans export function");Adding this at the end of the file after seeing it elsewhere:
export default null;Verifying that my console.log was present in the bundled background.js file
- Pasting the resulting background.js script into the browser
- Experimenting with the webpackJsonp global variable created by the scripts
My considerations:
- Creating an npm script to 1-bundle-vue-webpack and then 2-transpile my file using babel-loader
- Exploring the library output option in webpack, although I believe it allows code to be available for use in a variable rather than automatically executing upon load
- Webpack's output in IIFE: https://webpack.js.org/configuration/output/#outputiife