title: how launch webpack dev server for Electron.js App
body: <p>I develop project in custom way (for more handy) and I need to create dev env.
  I use Webpack5 for creating dev server with HMR mode.</p>
  <p>When I launch my script (which config and run webpack dev server) I have nothing error throw BUT also nothing append.</p>
  <p>Can anyone help me to understand and create Webpack dev server for Electron app ?</p>
  <p><strong>My webpack.config.js</strong></p>
  <pre><code>import path                         from 'path'
  import webpack                      from 'webpack'
  import {VueLoaderPlugin}              from 'vue-loader'
  import HTMLWebpackPlugin            from 'html-webpack-plugin'
  import url                          from &quot;url&quot;
  import nodeExternals                from 'webpack-node-externals'
  
  const __filename        = url.fileURLToPath(import.meta.url)
  const __dirname         = path.dirname(__filename)
  const buildDir          = path.join(__dirname, '..', 'build')
  const mainEntryFile     = path.join(__dirname, '..', 'src', 'main', 'main.js')
  const indexHTMLFile     = path.join(__dirname, '..', 'src', 'renderer', 'index.html')
  const rendererEntryFile = path.join(__dirname, '..', 'src', 'renderer', 'renderer.js')
  const componentDir      = path.join(__dirname, '..', 'src', 'renderer/components')
  const nodeModulesDir    = path.join(__dirname, '..', 'node_modules')
  const srcDir            = path.join(__dirname, '..', 'src')
  
  console.log('======= ComponentsDir : ' + componentDir)
  console.log('======= BuildDir : ' + buildDir)
  console.log('======= srcdDir : ' + srcDir)
  console.log('======= mainEntryFile : ' + mainEntryFile)
  
  let webpackConfig =
  {
      entry: {
          main: mainEntryFile,
          app: rendererEntryFile
      },
  
      output: {
          path: buildDir,
          filename: 'main-[name].js'
      },
  
      mode: &quot;development&quot;,
      devtool: 'eval',
      target: 'electron-renderer',
      // externals: [nodeExternals()],
      // stats: 'errors-only',
  
      node: {
          __dirname: false,
          __filename: false
      },
  
      resolve: {
          alias: {
              // this isn't technically needed, since the default `vue` entry for bundlers
              // is a simple `export * from '@vue/runtime-dom`. However having this
              // extra re-export somehow causes webpack to always invalidate the module
              // on the first HMR update and causes the page to reload.
              vue: &quot;@vue/runtime-dom&quot;,
              // env: path.resolve(__dirname, `./env_${envName(env)}.json`)
              &quot;@&quot;: srcDir,
              '@vueComponents': 'src/renderer/components'
          },
          extensions: ['.ts', '.js', '.json'],
      },
  
      // resolveLoader: {
      //     modules: [
      //         nodeModulesDir
      //     ]
      // },
  
      module: {
          rules: [
          {
              test: /\.js$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
              options: {
                  presets: ['@babel/preset-env']
              }
          },
          {
              test: /\.ts?$/,
              use: 'ts-loader',
              exclude: /node_modules/,
          },
          {
              test: /.vue$/,
              loader: 'vue-loader',
              options: {
                  esModule: true
              }
          },
          {
              test: /\.css$/,
              use: [
                  'vue-style-loader',
                  'css-loader'
              ]
          }]
      },
  
      plugins: [
              new webpack.HotModuleReplacementPlugin(),
              new VueLoaderPlugin(),
              new HTMLWebpackPlugin({
                  showErrors: true,
                  cache: true,
                  template: indexHTMLFile
              })
          ]
  }
  
  export default webpackConfig
  </code></pre>
  <p><strong>my dev-server-webpack.js (for launching webpack) :</strong></p>
  <pre><code>import webpack                        from 'webpack'
  import WebpackDevServer               from 'webpack-dev-server'
  import webpackConfig                  from '../config/webpack.config.js'
  import path                           from 'path'
  import url                            from 'url'
  
  console.log('---------------------------------------------')
  console.log('Starting the webpack dev web server script...')
  console.log('---------------------------------------------')
  
  const __filename = url.fileURLToPath(import.meta.url);
  console.log('Filename : ' + __filename)
  console.log('Directory name : ' + path.dirname(__filename))
  
  const server = new WebpackDevServer(webpack(webpackConfig), {})
  
  server.start()
  </code></pre>
  <p><strong>And my output script log into console is :</strong></p>
  <pre><code>λ npm run webpack:dev                                                                                                                                                                                                                                 
  
  &gt; electron-vue-template@0.1.0 webpack:dev
  &gt; set NODE_ENV=development &amp;&amp; node scripts/dev-server-webpack.js
  runtime modules 54.1 KiB 24 modules
  orphan modules 228 bytes [orphan] 8 modules
  cacheable modules 736 KiB
    modules by path ./node_modules/ 724 KiB 35 modules
    modules by path ./src/ 11.9 KiB
      modules by path ./src/renderer/ 8.72 KiB
        modules by path ./src/renderer/components/*.vue 6.4 KiB 8 modules
        modules by path ./src/renderer/*.vue 2.11 KiB 5 modules
        ./src/renderer/renderer.js 212 bytes [built] [code generated]
      ./src/main/main.js 1.9 KiB [built] [code generated]
      ./src/service/router.ts 1.24 KiB [built] [code generated]
  external &quot;events&quot; 42 bytes [built] [code generated]
  external &quot;electron&quot; 42 bytes [built] [code generated]
  webpack 5.66.0 compiled successfully in 4433 ms
  </code></pre>
  <p>Compilation webpack successful but nothing chromium launched...</p>
  <p>What is the mechanism that authorize to launch a Chromium navigator (Electron) and the main process electron ?</p>
  <p>I don't want to use electron-webpack because it normalize (thus force structure and others think that not corresponding for all project) config, structure, options or files.</p>