Use Esbuild in webpack plugin

[linonetwo]

Preflight Checklist

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project follows, as appropriate.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Problem Description

ESBuild is super fast, and is becoming popular ( See https://2020.stateofjs.com/en-US/technologies/build-tools/ )

Hope electron forge webpack can utilize esbuild to speed up.

Proposed Solution

Replace ts-loader with esbuild directly, see link for details:

esbuild：https://esbuild.github.io/
esbuild-loader：https://github.com/privatenumber/esbuild-loader

Alternatives Considered

Maybe an esbuild plugin? But I think this is not necessary, because esbuild can be used in webpack.

Additional Information

An expert in ByteDance uses esbuild to speed up his building up to 144% ! (From 71s to 29s, with 0.05MLoc )

[linonetwo]

esbuild doesn't support decorator, so this can't be a drop'in replacement for every user. evanw/esbuild#509

But for people searched here, you can easily do so to adopt esbuild, if you are not using Decorator Metadata:

1. prepare a new tsconfig for esbuild, because 1. it don'r understand json with comment tsconfig.json is ignored privatenumber/esbuild-loader#58 (comment) 2. it don't support all configs

webpack.rules.js

  {
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'esbuild-loader',
      options: {
        loader: 'tsx',
        tsconfigRaw: require('./tsconfig.esbuild.json'),
        target: 'es2015',
      },
    },
  },

webpack.plugins.js

const { ESBuildPlugin } = require('esbuild-loader');

module.exports = [
  new ESBuildPlugin(),

webpack.main.config.js

const webpack = require('webpack');
const { ESBuildPlugin } = require('esbuild-loader');
const { webpackAlias } = require('./webpack.alias');

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  entry: './src/main/main.ts',
  // Put your normal webpack config below here
  module: {
    rules: require('./webpack.rules'),
  },
  resolve: {
    alias: webpackAlias,
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
  },
  plugins: [new ESBuildPlugin()],
};

[linonetwo]

And this might be a workaround evanw/esbuild#257 (comment)

[malept]

I'm not inclined to add yet another template just for esbuild + webpack support. It's possible to create a third party template with this configuration if you wish to make it.

[RamK777-stack]

@linonetwo hot reload is not working. when reloading getting blank white screen. any ideas ?

I used the same configuration. as you mentioned above.

in main.ts I am using mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY); is this a reason ? but for first time while starting app everything rendered correctly. while reloading screen gets white.

[linonetwo]

I use mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY) too, so I don't know. Please look at my code to check differences. Mine can hot reload renderer process, but main process don't have hot reload. https://github.com/tiddly-gittly/TidGi-Desktop

[RamK777-stack]

Thank !! @linonetwo I have customized header menu options, so In the reload action I am using BrowserWindow.getFocusedWindow()?.webContents.reload() . while doing this getting blank white screen. previously it was worked.

[linonetwo]

I'm doing the exactly same thing, https://github.com/tiddly-gittly/TidGi-Desktop/blob/feat/execute-graph/src/services/view/index.ts#L195 but works very fine.

And MAIN_WINDOW_WEBPACK_ENTRY

https://github.com/tiddly-gittly/TidGi-Desktop/blob/feat/execute-graph/src/services/windows/index.ts#L233

[RamK777-stack]

Thanks for the reply @linonetwo, I tried everything, and when I reloaded all the files in the source tab, and hangs showing only white screen. is this because of large bundle ? .webpack folder size is 136 MB