(FRONT) FRONT (2024)

<< return   Webpack note about Angular Electron

Using Webpack with Electron-Angular project is the recommended approach, especially as your application grows in complexity. It provides benefits like proper module resolution, code optimization, and handling various asset types.  Its the ideal way for larger Electron projects (or any project using more advanced module features) as this will make module resolution automatic, reduce bundle sizes for distributable applications, handle all web asset types including images, and in general make the application a lot more robust. While this has a small initial setup cost, the gains are substantial for long-term development, maintainability, and optimized production builds, especially in complex Electron projects. Follow the steps I provided earlier for Webpack setup. So:


(1) Install Webpack:

# npm install --save-dev webpack webpack-cli webpack-merge ts-loader html-webpack-plugin mini-css-extract-plugin css-loader copy-webpack-plugin

(2) Change TSC config, remove "outFile", see more about TSV options in TscCompilerOptions


(3) Create webpack.config.js 


   1:  content_copyaddcompare_arrowsopen_in_full
   2:  const path = require('path');
   3:   
   4:  module.exports = {
   5:    mode: 'development',  // Or 'production' when building for prod
   6:    target: 'electron-main', // Target Electron's main process
   7:    entry: './src/electron-main.ts',  // Electron main process entry
   8:    devtool: 'source-map',
   9:    output: {
  10:      path: path.resolve(__dirname, 'dist'),
  11:      filename: 'main.js', // Output filename for main process
  12:    },
  13:    module: {
  14:      rules: [
  15:        {
  16:          test: /\.ts$/,
  17:          use: 'ts-loader',
  18:          exclude: /node_modules/,
  19:        },
  20:      ],
  21:    },
  22:    resolve: {
  23:      extensions: ['.ts', '.js'],
  24:    },
  25:  };

(4) Add webpack.config.prod.js in the project's root


   1:  const { merge } = require('webpack-merge');
   2:  const baseConfig = require('./webpack.config.js');
   3:   
   4:  module.exports = merge(baseConfig, {
   5:      mode: 'production',
   6:   
   7:  });
   8:   
   9:  Use code with care. Learn more
  10:  And add webpack.config.dev.js in the project's root. This will be used for dev builds.
  11:  content_copyaddcompare_arrowsopen_in_full
  12:  const { merge } = require('webpack-merge');
  13:  const baseConfig = require('./webpack.config.js');
  14:   
  15:  module.exports = merge(baseConfig, {
  16:      mode: 'development',
  17:      devtool: 'inline-source-map',
  18:  });

(5) Modify package.json scripts to use Webpack


   1:  "scripts": {
   2:    // ...other scripts
   3:   
   4:    "electron:start": "npx cross-env NODE_ENV=development webpack --config webpack.config.dev.js && electron .",
   5:    "electron:build": "webpack --config webpack.config.prod.js && electron ."
   6:  },
   7:  "main": "dist/main.js", // update the main entry point for electron to point to the dist folder

(6) Build Angular separately: You'll still build your Angular app separately using ng build. Electron loads the built Angular app. You can add a script in package.json that builds both at the same time to improve workflow.



Electron context:


AngularElectron context:





Front context:



Comments ( )
<00>  <01>  <02>  <03>  <04>  <05>  <06>  <07>  <08>  <09>  <10>  <11>  <12>  <13>  <14>  <15>  <16>  <17>  <18>  <19>  <20>  <21>  <22>  <23>  <24>  <25> 
Link to this page: http://www.vb-net.com/AngularElectron/WebpackNote.htm
<TAGS>  <ARTICLES>  <FRONT>  <CORE>  <MVC>  <ASP>  <NET>  <DATA>  <TASK>  <XML>  <KIOSK>  <NOTES>  <SQL>  <LINUX>  <MONO>  <FREEWARE>  <DOCS> <TRAVELS> <FLOWERS> <RESUME> < THANKS ME>