build: First almost working webpack build

.gitignore

@@ -27,6 +27,7 @@ compile_commands.json
 .cache
 yarn-error.log
 .DS_Store
+.webpack
 
 # Coverage
 coverage

forge.config.js

@@ -9,12 +9,12 @@ const iconDir = path.resolve(__dirname, 'assets', 'icons')
 
 module.exports = {
   hooks: {
-    generateAssets: require('./tools/generateAssets')
+    //generateAssets: require('./tools/generateAssets')
   },
   packagerConfig: {
     name: 'Electron Fiddle',
     executableName: 'electron-fiddle',
-    asar: true,
+    asar: false,
     icon: path.resolve(__dirname, 'assets', 'icons', 'fiddle'),
     // TODO: FIXME?
     // ignore: [
@@ -93,5 +93,20 @@ module.exports = {
         prerelease: false
       }
     }
+  ],
+  plugins: [
+    ['@electron-forge/plugin-webpack', {
+      mainConfig: './webpack.main.config.js',
+      renderer: {
+        config: './webpack.renderer.config.js',
+        entryPoints: [
+          {
+            html: './static/index.html',
+            js: './src/renderer/app.tsx',
+            name: 'main_window'
+          }
+        ]
+      }
+    }]
   ]
 }

package.json

@@ -4,21 +4,18 @@
   "version": "0.10.0",
   "description": "The easiest way to get started with Electron",
   "repository": "https://github.com/electron/fiddle",
-  "main": "./dist/src/main/main",
+  "main": ".webpack/main",
   "scripts": {
     "contributors": "node ./tools/contributors.js",
-    "less": "node ./tools/lessc.js",
     "lint:style": "stylelint ./src/less/*.less --fix",
     "lint:ts": "tslint -c tslint.json -p tsconfig.json -e \"node_modules/**/*.ts\" --fix",
     "lint:tests": "tslint ./tests/**/*.ts{,x} -c tslint.json --fix",
     "lint:templates": "standard ./static/show-me/**/*.js",
     "lint": "npm-run-all lint:*",
-    "make": "electron-forge make",
-    "package": "electron-forge package",
-    "parcel:build": "node ./tools/parcel-build.js",
-    "parcel:watch": "node ./tools/parcel-watch.js",
-    "publish": "electron-forge publish",
-    "start": "rimraf ./dist && electron-forge start",
+    "make": "npm run contributors && electron-forge make",
+    "package": "npm run contributors && electron-forge package",
+    "publish": "npm run contributors && electron-forge publish",
+    "start": "electron-forge start",
     "test": "jest --config=jest.json --coverage",
     "test:ci": "jest --config=jest.json --coverage --runInBand",
     "test:coverage": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
@@ -68,7 +65,9 @@
     "@electron-forge/maker-rpm": "^6.0.0-beta.45",
     "@electron-forge/maker-squirrel": "^6.0.0-beta.45",
     "@electron-forge/maker-zip": "^6.0.0-beta.45",
+    "@electron-forge/plugin-webpack": "^6.0.0-beta.45",
     "@electron-forge/publisher-github": "^6.0.0-beta.45",
+    "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
     "@types/builtin-modules": "^3.1.1",
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.3",
@@ -82,27 +81,37 @@
     "@types/tmp": "0.1.0",
     "chokidar": "^3.2.2",
     "coveralls": "^3.0.7",
+    "css-loader": "^3.2.0",
     "electron": "7.0.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.3",
+    "file-loader": "^4.2.0",
     "jest": "^24.9.0",
     "jest-fetch-mock": "^2.1.2",
     "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "loader-utils": "^1.2.3",
     "log-symbols": "^3.0.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "monaco-editor-webpack-plugin": "^1.7.0",
     "node-abi": "^2.12.0",
     "node-fetch": "^2.6.0",
+    "node-loader": "^0.6.0",
     "npm-run-all": "^4.1.5",
-    "parcel-bundler": "^1.12.4",
     "react-test-renderer": "^16.11.0",
     "rimraf": "^3.0.0",
     "standard": "^14.3.1",
+    "style-loader": "^1.0.0",
     "stylelint": "^11.1.1",
     "stylelint-config-standard": "^19.0.0",
     "ts-jest": "^24.1.0",
+    "ts-loader": "^6.2.1",
     "tslint": "^5.20.0",
     "tslint-microsoft-contrib": "^6.2.0",
     "tslint-react": "^4.1.0",
-    "typescript": "^3.6.4"
+    "typescript": "^3.6.4",
+    "url-loader": "^2.2.0",
+    "webpack-bundle-analyzer": "^3.6.0"
   }
 }

src/less/blueprint.less

@@ -1,7 +1,7 @@
-@import (inline) "../../node_modules/@blueprintjs/core/lib/css/blueprint.css";
-@import (inline) "../../node_modules/@blueprintjs/select/lib/css/blueprint-select.css";
-@import (inline) "../../node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css";
-@import (inline) "../../node_modules/@blueprintjs/core/lib/less/variables.less";
+@import "~@blueprintjs/core/lib/css/blueprint.css";
+@import "~@blueprintjs/select/lib/css/blueprint-select.css";
+@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
+@import "~@blueprintjs/core/lib/less/variables.less";
 
 // Override some of the colors
 .fiddle.bp3-dark {

src/main/main.ts

@@ -1,6 +1,5 @@
 import { app } from 'electron';
 
-import { isDevMode } from '../utils/devmode';
 import { setupAboutPanel } from '../utils/set-about-panel';
 import { setupDevTools } from './devtools';
 import { setupDialogs } from './dialogs';
@@ -16,7 +15,6 @@ import { getOrCreateMainWindow } from './windows';
  */
 export async function onReady() {
   await onFirstRunMaybe();
-  if (!isDevMode()) process.env.NODE_ENV = 'production';
 
   getOrCreateMainWindow();
   setupAboutPanel();
@@ -60,6 +58,8 @@ export function onWindowsAllClosed() {
  * Exported for testing purposes.
  */
 export function main() {
+  console.log(`Welcome to Fiddle ${app.getVersion()}`);
+
   // Handle creating/removing shortcuts on Windows when
   // installing/uninstalling.
   if (shouldQuit()) {
@@ -68,7 +68,7 @@ export function main() {
   }
 
   // Set the app's name
-  app.setName('Electron Fiddle');
+  app.name = 'Electron Fiddle';
 
   // Ensure that there's only ever one Fiddle running
   listenForProtocolHandler();

src/main/windows.ts

@@ -16,6 +16,7 @@ export function getMainWindowOptions(): Electron.BrowserWindowConstructorOptions
     height: 900,
     minHeight: 600,
     minWidth: 600,
+    show: true,
     titleBarStyle: process.platform === 'darwin' ? 'hidden' : undefined,
     acceptFirstMouse: true,
     backgroundColor: '#1d2427',
@@ -36,7 +37,7 @@ export function getMainWindowOptions(): Electron.BrowserWindowConstructorOptions
 export function createMainWindow(): Electron.BrowserWindow {
   console.log(`Creating main window`);
   const browserWindow = new BrowserWindow(getMainWindowOptions());
-  browserWindow.loadFile('./dist/static/index.html');
+  browserWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
 
   browserWindow.webContents.once('dom-ready', () => {
     browserWindow.show();

src/renderer/app.tsx

@@ -21,6 +21,9 @@ import { appState } from './state';
 import { getTheme } from './themes';
 import { TouchBarManager } from './touch-bar-manager';
 
+// Import style
+require('../less/root.less');
+
 /**
  * The top-level class controlling the whole app. This is *not* a React component,
  * but it does eventually render all components.

src/renderer/binary.ts

@@ -1,7 +1,6 @@
-import * as fsType from 'fs-extra';
+import * as fs from 'fs-extra';
 import * as path from 'path';
 
-import { fancyImport } from '../utils/import';
 import { normalizeVersion } from '../utils/normalize-version';
 import { USER_DATA_PATH } from './constants';
 import { getOfflineTypeDefinitionPath } from './fetch-types';
@@ -24,7 +23,6 @@ export class BinaryManager {
    */
   public async remove(iVersion: string): Promise<void> {
     const version = normalizeVersion(iVersion);
-    const fs = await fancyImport<typeof fsType>('fs-extra');
     let isDeleted = false;
 
     // utility to re-run removal functions upon failure
@@ -74,7 +72,6 @@ export class BinaryManager {
    */
   public async setup(iVersion: string): Promise<void> {
     const version = normalizeVersion(iVersion);
-    const fs = await fancyImport<typeof fsType>('fs-extra');
     const { promisify } = await import('util');
     const eDownload = promisify(require('electron-download'));
 
@@ -143,7 +140,6 @@ export class BinaryManager {
    * @returns {Promise<Array<string>>}
    */
   public async getDownloadedVersions(): Promise<Array<string>> {
-    const fs = await fancyImport<typeof fsType>('fs-extra');
     const downloadPath = path.join(USER_DATA_PATH, 'electron-bin');
     console.log(`BinaryManager: Checking for downloaded versions`);
 
@@ -173,13 +169,11 @@ export class BinaryManager {
    */
   public async getIsDownloaded(version: string, dir?: string): Promise<boolean> {
     const expectedPath = this.getElectronBinaryPath(version, dir);
-    const fs = await fancyImport<typeof fsType>('fs-extra');
 
     return fs.existsSync(expectedPath);
   }
 
   public async removeTypeDefsForVersion(version: string) {
-    const fs = await fancyImport<typeof fsType>('fs-extra');
     const _version = normalizeVersion(version);
     const typeDefsDir = path.dirname(getOfflineTypeDefinitionPath(_version));
 
@@ -212,7 +206,7 @@ export class BinaryManager {
    */
   private unzip(zipPath: string, extractPath: string): Promise<void> {
     return new Promise(async (resolve, reject) => {
-      const extract = (await fancyImport<any>('extract-zip')).default;
+      const extract = require('extract-zip');
 
       process.noAsar = true;
 

src/renderer/components/editors.tsx

@@ -1,6 +1,7 @@
 import { reaction } from 'mobx';
 import { observer } from 'mobx-react';
-import * as MonacoType from 'monaco-editor';
+// tslint:disable-next-line:no-submodule-imports
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import * as React from 'react';
 import { Mosaic, MosaicBranch, MosaicNode, MosaicWindow, MosaicWindowProps } from 'react-mosaic-component';
 
@@ -20,7 +21,7 @@ import { renderNonIdealState } from './editors-non-ideal-state';
 import { DocsDemoGoHomeButton, MaximizeButton, RemoveButton } from './editors-toolbar-button';
 import { ShowMe } from './show-me';
 
-const defaultMonacoOptions: MonacoType.editor.IEditorOptions = {
+const defaultMonacoOptions: monaco.editor.IEditorOptions = {
   minimap: {
     enabled: false
   },
@@ -40,9 +41,9 @@ export interface EditorsProps {
 }
 
 export interface EditorsState {
-  monaco?: typeof MonacoType;
+  monaco?: typeof monaco;
   isMounted?: boolean;
-  monacoOptions: MonacoType.editor.IEditorOptions;
+  monacoOptions: monaco.editor.IEditorOptions;
 }
 
 @observer
@@ -132,7 +133,7 @@ export class Editors extends React.Component<EditorsProps, EditorsState> {
 
       Object.keys(window.ElectronFiddle.editors)
         .forEach((key) => {
-          const editor: MonacoType.editor.IStandaloneCodeEditor | null
+          const editor: monaco.editor.IStandaloneCodeEditor | null
             = window.ElectronFiddle.editors[key];
 
           if (editor) {
@@ -229,7 +230,6 @@ export class Editors extends React.Component<EditorsProps, EditorsState> {
    */
   public renderEditor(id: EditorId): JSX.Element | null {
     const { appState } = this.props;
-    const { monaco } = this.state;
 
     return (
       <Editor
@@ -243,7 +243,6 @@ export class Editors extends React.Component<EditorsProps, EditorsState> {
 
   public render() {
     const { appState } = this.props;
-    const { monaco } = this.state;
 
     if (!monaco) return null;
 
@@ -273,8 +272,6 @@ export class Editors extends React.Component<EditorsProps, EditorsState> {
    */
   public async loadMonaco(): Promise<void> {
     const { app } = window.ElectronFiddle;
-    const loader = require('monaco-loader');
-    const monaco = app.monaco || await loader();
 
     if (!app.monaco) {
       app.monaco = monaco;

src/renderer/components/settings-general-appearance.tsx

@@ -1,7 +1,7 @@
 import { Button, Callout, FormGroup, MenuItem } from '@blueprintjs/core';
 import { ItemPredicate, ItemRenderer, Select } from '@blueprintjs/select';
 import { shell } from 'electron';
-import * as fsType from 'fs-extra';
+import * as fs from 'fs-extra';
 import { observer } from 'mobx-react';
 import * as path from 'path';
 import * as React from 'react';
@@ -113,7 +113,6 @@ export class AppearanceSettings extends React.Component<
    */
   public async createNewThemeFromCurrent(): Promise<boolean> {
     const { appState } = this.props;
-    const fs = await fancyImport<typeof fsType>('fs-extra');
     const theme = await getTheme(appState.theme);
 
     try {
@@ -147,8 +146,6 @@ export class AppearanceSettings extends React.Component<
    * @returns {Promise<boolean>}
    */
   public async openThemeFolder(): Promise<boolean> {
-    const fs = await fancyImport<typeof fsType>('fs-extra');
-
     try {
       await fs.ensureDir(THEMES_PATH);
       await shell.showItemInFolder(THEMES_PATH);

src/renderer/fetch-types.ts

@@ -1,10 +1,9 @@
-import * as fsType from 'fs-extra';
+import * as fs from 'fs-extra';
 import * as MonacoType from 'monaco-editor';
 import * as path from 'path';
 
 import { ElectronVersion, ElectronVersionSource } from '../interfaces';
 import { callIn } from '../utils/call-in';
-import { fancyImport } from '../utils/import';
 import { USER_DATA_PATH } from './constants';
 
 const definitionPath = path.join(USER_DATA_PATH, 'electron-typedef');
@@ -53,7 +52,6 @@ export function getOfflineTypeDefinitionPath(version: string): string {
  * @returns {boolean}
  */
 export async function getOfflineTypeDefinitions(version: string): Promise<boolean> {
-  const fs = await fancyImport<typeof fsType>('fs-extra');
   return fs.existsSync(getOfflineTypeDefinitionPath(version));
 }
 
@@ -65,7 +63,6 @@ export async function getOfflineTypeDefinitions(version: string): Promise<boolea
  * @returns {void}
  */
 export async function getDownloadedVersionTypeDefs(version: ElectronVersion): Promise<string | null> {
-  const fs = await fancyImport<typeof fsType>('fs-extra');
     await fs.mkdirp(definitionPath);
     const offlinePath = getOfflineTypeDefinitionPath(version.version);
 
@@ -93,7 +90,6 @@ export async function getDownloadedVersionTypeDefs(version: ElectronVersion): Pr
 
 export async function getLocalVersionTypeDefs(version: ElectronVersion) {
   if (version.source === ElectronVersionSource.local && !!version.localPath) {
-    const fs = await fancyImport<typeof fsType>('fs-extra');
     const typesPath = getLocalTypePathForVersion(version);
     if (!!typesPath && fs.existsSync(typesPath)) {
       return fs.readFile(typesPath, 'utf-8');

src/renderer/file-manager.ts

@@ -1,11 +1,10 @@
-import * as fsType from 'fs-extra';
+import * as fs from 'fs-extra';
 import * as path from 'path';
 
 import { EditorValues, Files, FileTransform } from '../interfaces';
 import { IpcEvents } from '../ipc-events';
 import { INDEX_HTML_NAME, MAIN_JS_NAME, PACKAGE_NAME, PRELOAD_JS_NAME, RENDERER_JS_NAME } from '../shared-constants';
 import { DEFAULT_OPTIONS, PackageJsonOptions } from '../utils/get-package';
-import { fancyImport } from '../utils/import';
 import { ipcRendererManager } from './ipc';
 import { AppState } from './state';
 import { getTemplateValues } from './templates';
@@ -149,8 +148,6 @@ export class FileManager {
    */
   public async cleanup(dir?: string): Promise<boolean> {
     if (dir) {
-      const fs = await fancyImport<typeof fsType>('fs-extra');
-
       if (fs.existsSync(dir)) {
         try {
           await fs.remove(dir);
@@ -175,7 +172,6 @@ export class FileManager {
   public async saveToTemp(
     options: PackageJsonOptions, ...transforms: Array<FileTransform>
   ): Promise<string> {
-    const fs = await fancyImport<typeof fsType>('fs-extra');
     const tmp = await import('tmp');
     const files = await this.getFiles(options, ...transforms);
     const dir = tmp.dirSync();
@@ -203,7 +199,6 @@ export class FileManager {
    */
   private async readFile(filePath: string): Promise<string> {
     try {
-      const fs = await fancyImport<typeof fsType>('fs-extra');
       return await fs.readFile(filePath, 'utf-8');
     } catch (error) {
       console.log(`FileManager: Could not read ${filePath}`, error);
@@ -221,7 +216,6 @@ export class FileManager {
    */
   private async saveFile(filePath: string, content: string): Promise<void> {
     try {
-      const fs = await fancyImport<typeof fsType>('fs-extra');
       return await fs.outputFile(filePath, content, { encoding: 'utf-8' });
     } catch (error) {
       console.log(`FileManager: Could not save ${filePath}`, error);
@@ -239,7 +233,6 @@ export class FileManager {
    */
   private async removeFile(filePath: string): Promise<void> {
     try {
-      const fs = await fancyImport<typeof fsType>('fs-extra');
       return await fs.remove(filePath);
     } catch (error) {
       console.log(`FileManager: Could not remove ${filePath}`, error);

src/renderer/state.ts

@@ -1,4 +1,4 @@
-import * as fsType from 'fs-extra';
+import * as fs from 'fs-extra';
 import { action, autorun, computed, observable, when } from 'mobx';
 import { MosaicNode } from 'react-mosaic-component';
 
@@ -20,7 +20,6 @@ import { arrayToStringMap } from '../utils/array-to-stringmap';
 import { EditorBackup, getEditorBackup } from '../utils/editor-backup';
 import { createMosaicArrangement, getVisibleMosaics } from '../utils/editors-mosaic-arrangement';
 import { getName } from '../utils/get-title';
-import { fancyImport } from '../utils/import';
 import { normalizeVersion } from '../utils/normalize-version';
 import { isEditorBackup, isEditorId, isPanelId } from '../utils/type-checks';
 import { BinaryManager } from './binary';
@@ -416,7 +415,6 @@ export class AppState {
     const versionObject = this.versions[version];
 
     if (versionObject.source === ElectronVersionSource.local) {
-      const fs = await fancyImport<typeof fsType>('fs-extra');
       const typePath = getLocalTypePathForVersion(versionObject);
       console.info(`TypeDefs: Watching file for local version ${version} at path ${typePath}`);
       this.localTypeWatcher = fs.watch(typePath!, async () => {

src/renderer/templates.ts

@@ -1,9 +1,8 @@
-import * as fsExtraType from 'fs-extra';
-import * as pathType from 'path';
+import * as fs from 'fs-extra';
+import * as path from 'path';
 
 import { EditorValues } from '../interfaces';
 import { INDEX_HTML_NAME, MAIN_JS_NAME, PRELOAD_JS_NAME, RENDERER_JS_NAME } from '../shared-constants';
-import { fancyImport } from '../utils/import';
 
 /**
  * Returns expected content for a given name.
@@ -12,8 +11,6 @@ import { fancyImport } from '../utils/import';
  * @returns {Promise<EditorValues>}
  */
 export async function getTemplateValues(name: string): Promise<EditorValues> {
-  const path = await fancyImport<typeof pathType>('path');
-  const fs = await fancyImport<typeof fsExtraType>('fs-extra');
   const templatesPath = path.join(__dirname, '../../static/show-me');
   const templatePath = path.join(templatesPath, name.toLowerCase());
 

static/index.html

@@ -6,11 +6,9 @@
   <title>Electron Fiddle</title>
   <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data:; media-src 'none'; child-src 'self'; object-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https:;">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="../src/less/root.less">
   <style id="fiddle-theme"></style>
 </head>
 <body class="fiddle">
   <div id="app"></div>
-  <script src="../src/renderer/app.tsx"></script>
 </body>
 </html>

tests/mocks/electron.ts

@@ -116,7 +116,6 @@ const app = {
   quit: jest.fn(),
   relaunch: jest.fn(),
   setJumpList: jest.fn(),
-  setName: jest.fn(),
   requestSingleInstanceLock: jest.fn(),
   on: jest.fn(),
   once: jest.fn()

tools/generateAssets.js

@@ -1,8 +0,0 @@
-/* tslint:disable */
-
-const { maybeFetchContributors } = require('./contributors')
-const { compileParcel } = require('./parcel-build')
-
-module.exports = async () => {
-  await Promise.all([maybeFetchContributors(), compileParcel()])
-}

tools/parcel-build.js

@@ -1,47 +0,0 @@
-/* tslint:disable */
-
-const Bundler = require('parcel-bundler')
-const path = require('path')
-
-async function compileParcel (options = {}) {
-  const entryFiles = [
-    path.join(__dirname, '../static/index.html'),
-    path.join(__dirname, '../src/main/main.ts')
-  ]
-
-  const bundlerOptions = {
-    outDir: './dist', // The out directory to put the build files in, defaults to dist
-    outFile: undefined, // The name of the outputFile
-    publicUrl: '../', // The url to server on, defaults to dist
-    watch: false, // whether to watch the files and rebuild them on change, defaults to process.env.NODE_ENV !== 'production'
-    cache: false, // Enabled or disables caching, defaults to true
-    cacheDir: '.cache', // The directory cache gets put in, defaults to .cache
-    contentHash: false, // Disable content hash from being included on the filename
-    minify: false, // Minify files, enabled if process.env.NODE_ENV === 'production'
-    scopeHoist: false, // turn on experimental scope hoisting/tree shaking flag, for smaller production bundles
-    target: 'electron', // browser/node/electron, defaults to browser
-    // https: { // Define a custom {key, cert} pair, use true to generate one or false to use http
-    //   cert: './ssl/c.crt', // path to custom certificate
-    //   key: './ssl/k.key' // path to custom key
-    // },
-    logLevel: 3, // 3 = log everything, 2 = log warnings & errors, 1 = log errors
-    hmr: true, // Enable or disable HMR while watching
-    hmrPort: 0, // The port the HMR socket runs on, defaults to a random free port (0 in node.js resolves to a random free port)
-    sourceMaps: true, // Enable or disable sourcemaps, defaults to enabled (minified builds currently always create sourcemaps)
-    hmrHostname: '', // A hostname for hot module reload, default to ''
-    detailedReport: false, // Prints a detailed report of the bundles, assets, filesizes and times, defaults to false, reports are only printed if watch is disabled,
-    ...options
-  }
-
-  const bundler = new Bundler(entryFiles, bundlerOptions)
-
-  // Run the bundler, this returns the main bundle
-  // Use the events if you're using watch mode as this promise will only trigger once and not for every rebuild
-  await bundler.bundle()
-}
-
-module.exports = {
-  compileParcel
-}
-
-if (require.main === module) compileParcel()

tools/parcel-watch.js

@@ -1,11 +0,0 @@
-const { compileParcel } = require('./parcel-build')
-
-async function watchParcel () {
-  return compileParcel({ watch: true })
-}
-
-module.exports = {
-  watchParcel
-}
-
-if (require.main === module) watchParcel()

webpack.main.config.js

@@ -0,0 +1,27 @@
+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: {
+    /**
+     * Determines which file extensions are okay to leave off from
+     * the ends of require / import paths. Has no impact on what file types
+     * webpack will process.
+     *
+     * For example:
+     *
+     * import { logger } from './logger';
+     *
+     * Instead of:
+     *
+     * import { logger } from './logger.ts';
+     */
+    extensions: [ '.ts', '.tsx', '.js', '.jsx', '.json' ],
+  }
+};

webpack.renderer.config.js

@@ -0,0 +1,83 @@
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack');
+
+const rules = require('./webpack.rules');
+
+rules.push({
+  test: /\.css$/,
+  use: [
+    { loader: MiniCssExtractPlugin.loader },
+    { loader: 'css-loader' }
+  ],
+});
+
+rules.push({
+  test: /\.less$/,
+  use: [
+    { loader: MiniCssExtractPlugin.loader },
+    { loader: 'css-loader' },
+    {
+      loader: 'less-loader',
+      options: {
+        noIeCompat: true
+      }
+    }
+  ],
+});
+
+rules.push({
+  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+  loader: 'file-loader',
+  options: {
+    name: '[name].[ext]',
+    outputPath: 'fonts/'
+  }
+});
+
+module.exports = {
+  // Put your normal webpack config below here
+  module: {
+    rules,
+  },
+  resolve: {
+    alias: {
+      'monaco-editor': 'monaco-editor/esm/vs/editor/editor.api'
+    },
+    /**
+     * Determines which file extensions are okay to leave off from
+     * the ends of require / import paths. Has no impact on what file types
+     * webpack will process.
+     *
+     * For example:
+     *
+     * import { logger } from './logger';
+     *
+     * Instead of:
+     *
+     * import { logger } from './logger.ts';
+     */
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+  },
+  plugins: [
+    new MonacoWebpackPlugin({
+      languages: [
+        'typescript',
+        'javascript',
+        'html',
+        'css'
+      ]
+    }),
+    new BundleAnalyzerPlugin(),
+    new MiniCssExtractPlugin({
+      filename: "./css/[name].css"
+    }),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    })
+  ],
+  externals: {
+    'es6-promise': 'es6-promise'
+  }
+};

webpack.rules.js

@@ -0,0 +1,27 @@
+module.exports = [
+  // Add support for native node modules
+  {
+    test: /\.node$/,
+    use: 'node-loader',
+  },
+  {
+    test: /\.(m?js|node)$/,
+    parser: { amd: false },
+    use: {
+      loader: '@marshallofsound/webpack-asset-relocator-loader',
+      options: {
+        outputAssetBase: 'native_modules',
+      },
+    },
+  },
+  {
+    test: /\.tsx?$/,
+    exclude: /(node_modules|.webpack)/,
+    loaders: [{
+      loader: 'ts-loader',
+      options: {
+        transpileOnly: true
+      }
+    }]
+  }
+];