Compile JavaScript into bytecode using bytenode
.
Inspired by bytenode-webpack-plugin
.
npm install --save @herberttn/bytenode-webpack-plugin
electron-forge
with caveats
typescript-webpack
webpack
webpack
entry
as a string
(e.g., entry: 'src/index.js'
)entry
as an array
(e.g., entry: ['src/index.js']
)entry
as an object
(e.g., entry: { main: 'src/index.js' }
)entry
middlewares (e.g., entry: ['src/index.js', 'webpack-hot-middleware/client']
)entry.*.filename
(e.g., entry: { main: { filename: 'index.js' } }
)output.filename
(e.g., output: { filename: '[name].js' }
)output.filename
(e.g., output: { filename: 'index.js' }
)import { BytenodeWebpackPlugin } from '@herberttn/bytenode-webpack-plugin'; // webpack options module.exports = { // ... plugins: [ // using all defaults new BytenodeWebpackPlugin(), // overriding an option new BytenodeWebpackPlugin({ compileForElectron: true, }), ], };
type FileMatcherIntent = string | RegExp; // glob or regex interface Options { compileAsModule: boolean; // wraps the code in a node module compileForElectron: boolean; // compiles for electron instead of plain node debugLifecycle: boolean; // enables webpack hooks lifecycle logs exclude?: FileMatcherIntent[]; // prevents assets from being compiled, accepts glob and regex include?: FileMatcherIntent[]; // filter assets to compile, accepts glob and regex keepSource: boolean; // emits the original source files along with the compiled ones preventSourceMaps: boolean; // prevents source maps from being generated }
Globs are handled using
picomatch
new BytenodeWebpackPlugin({ compileAsModule: true, compileForElectron: false, debugLifecycle: false, keepSource: false, preventSourceMaps: true, })
Sample projects can be found in the examples directory.
electron-forge
with typescript-webpack
templateelectron-forge
with webpack
templateYou may need to change the default entry and output configurations. Probably something like this:
- entry: './src/index.ts', + entry: { + index: './src/index.ts', + }, + output: { + filename: '[name].js', + }, + target: 'electron-main',
You will probably run into missing node core modules. Should probably be fixed by something like this:
webpack.renderer.config.js+ target: 'electron-renderer',
You may need to change the default entry and output configurations. Probably something like this:
webpack.preload.config.js- entry: './src/preload.ts', + entry: { + preload: './src/preload.ts', + }, + output: { + filename: '[name].js', + }, + target: 'electron-preload',
"@electron-forge/plugin-webpack", { "mainConfig": "./webpack.main.config.js", "renderer": { "config": "./webpack.renderer.config.js", "entryPoints": [ { "html": "./src/index.html", "js": "./src/renderer.ts", "name": "main_window", + "preload": { + "config": "webpack.preload.config.js" + } } ] } }Missing node core modules
If you run into a webpack error similar to the one below, it's because bytenode
requires some of node's code modules to properly do its job, and only you can decide the best way to provide them given your configuration.
Three possible solutions:
node
electron-*
target, when compiling for electronOther solutions may exist.
Error example:
ERROR in ../../node_modules/bytenode/lib/index.js 3:11-24 Module not found: Error: Can't resolve 'fs' in '../../node_modules/bytenode/lib' @ ./src/renderer.loader.js 1:0-19 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "vm": require.resolve("vm-browserify") }' - install 'vm-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "vm": false } @ ./src/renderer.loader.js 1:0-19
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4