Electron-vue: How to include a webpack module using file protocol i.e. 'file://'

[ghost]

I want to load a js module as webview preload script:

when i try to include inject.js like this it won't be found since webpack is being used to pack/build the project and it expects require('./inject.js'). At the same time expects file:// protocol url as preload argument...
How can I include modules with webpack using file:// protocol?

Any help would be greatly appreciated, since I ran out of options, and my last resort is to dig in Webpack , which I'm trying to avoid...

[SimulatedGREG]

The best way to approach this would be to treat your inject.js as a static asset outside of webpack as it provides the easier way to approach this with the current setup release in Milestone: Minimize. There is a handy new __static variable that can be used in pair with path.join to get a reliable path to your static/inject.js file in both development and production.

let pathToInjectScript = `file://${path.join(__static, '/inject.js')}`

Yes this method loses all webpack functionality with JS transpiling and linting, but if you are not comfortable with webpack then this would in theory be easier.

https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html#use-case-within-js-with-fspath-and-static

The alternative method would be to manually adjust the webpack configuration to produce another module specifically for your inject.js script. electron-vue doesn't have any current plans to support bundling a preload script.

Related: #236

[SimulatedGREG]

Closing due to inactivity. Please feel free to comment back any further questions. Like I said previously, there are not any current plans to support a preload script within the electron-vue setup, but I'll keep this in mind when the next Milestone gets planned out.

[yhostc]

I have also encountered this problem, has been resolved, and I hope to help you

setting preload:

<webview class="webview" :preload="preload" src="https://www.google.com"></webview>

setting for vue data:

preload: `file:${require('path').resolve(__dirname, './preload.js')}`

[jefflam]

@yhostc I'm having some problems with this.. in your preload.js file, how do you test that the preload file has indeed been loaded?

Thanks in advance!

[yhostc]

we can send message to the webview in preload.js, through by ipc renderer

[jefflam]

@yhostc thanks for your response! I was able to also load the preload file successfully. That being said, I was wondering if there was any way that the webview could send some data to the ipcMain or ipcRenderer in the electron app though, hmm

[motin]

I managed to get my webpack-built preload file loaded via the file:// protocol by adding a separate entrypoint for it and then using https://www.npmjs.com/package/write-file-webpack-plugin to force the compiled files being written to disk despite dev-server being used.
In production, the built preload file is found in __dirname and during development, it will be available in the webpack output path, thus you need to conditionally set the path to the preload script based on production/development.

[shuoGG1239]

I place the preload.js in the static folder, and the following code worked for me

<webview  :preload="preload"></webview>

preload: `file:${require('path').resolve(__static, './preload.js')}`

[yansenlei]

I have also encountered this problem, has been resolved, and I hope to help you

setting preload:

<webview class="webview" :preload="preload" src="https://www.google.com"></webview>

setting for vue data:

preload: `file:${require('path').resolve(__dirname, './preload.js')}`

The build is invalid because it will go to the installation directory to look for the files:
Error: Cannot find module '/Applications/myapp.app/Contents/Resources/app.asar/dist/electron/preload.js'