@herberttn/bytenode-webpack-plugin

@herberttn/bytenode-webpack-plugin

Compile JavaScript into bytecode using bytenode.
Inspired by bytenode-webpack-plugin.

Install

npm install --save @herberttn/bytenode-webpack-plugin

Supported versions

• node v14+ (this plugin is published in ES2020 CommonJS syntax at the moment)
• webpack v5.x

Supported features

• electron-forge
  • :heavy_check_mark: Default configuration with caveats
• webpack
  • :heavy_check_mark: entry as a string (e.g., entry: 'src/index.js')
  • :heavy_check_mark: entry as an array (e.g., entry: ['src/index.js'])
  • :heavy_check_mark: entry as an object (e.g., entry: { main: 'src/index.js' })
  • :heavy_check_mark: entry middlewares (e.g., entry: ['src/index.js', 'webpack-hot-middleware/client'])
  • :x: entry.*.filename (e.g., entry: { main: { filename: 'index.js' } })
  • :heavy_check_mark: Dynamic output.filename (e.g., output: { filename: '[name].js' })
  • :x: Static output.filename (e.g., output: { filename: 'index.js' })

Usage

import { BytenodeWebpackPlugin } from '@herberttn/bytenode-webpack-plugin';

// webpack options
module.exports = {
  // ...

  plugins: [
    // using all defaults
    new BytenodeWebpackPlugin(),

    // overriding an option
    new BytenodeWebpackPlugin({
      compileForElectron: true,
    }),
  ],
};

Options

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
  keepSource: boolean;         // emits the original source files along with the compiled ones
  preventSourceMaps: boolean;  // prevents source maps from being generated
}

Default options

new BytenodeWebpackPlugin({
  compileAsModule: true,
  compileForElectron: false,
  debugLifecycle: false,
  keepSource: false,
  preventSourceMaps: true,
})

Caveats

electron-forge support

main process

You may need to change the default entry configuration for the main process. Probably something like this:

-  entry: './src/index.ts',
+  entry: {
+    index: './src/index.ts',
+  },
+  output: {
+    filename: '[name].js',
+  },

renderer process

You will probably run into missing node core modules.

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.

Two possible solutions:

• Set webpack's target to node
• Provide polyfills for the necessary modules

Other 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

Contributors

herberttn

Jeff Robbins

Changelog

2.1.1 (2022-10-24)

Bug Fixes

• strip-shebang should be a production dependency (fd5a570)