install webpack

[omenking]

• ensure npm run dev runs free without errors
• ensure npm run build compiles without errors
• ensure npm run dist builds app and runs without errors
• ensure test suite /spec runs through webpack

[omenking]

I found this which might be of help
https://medium.com/kendraio/using-angular-with-electron-webpack-b9763903823c

[omenking]

I can see we are choosing to serve our static file.
I noticed that electron-webpack serves up a file in development from localhost:8090 and this is done in that tutorial I shared

const dev = process.env.NODE_ENV !== 'production';
const pathname = dev ? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}` : `file://${__dirname}/index.html`;

[omenking]

It appears the renderer.js file is also served up dynamically.

[omenking]

Dead end doing npm run dev

Went to do
npm run build but got an error
Adding this to my package.json allowed build to work

  "resolutions": {
      "webpack-sources": "1.0.1"
  },

electron-userland/electron-webpack#58

[omenking]

I can see now why the static file was linked, since when I build like this the url make sense

[omenking]

I can't get pass this in npm run dev

[omenking]

Works with no issue if pass in the pathname directly.
'''
win.loadURL(pathname)
//win.loadURL(url.format({
//protocol: 'file://',
//pathname: pathname,
//slashes: true,
//icon: path.join(__static, 'icons', 'png', '64x64.png')
//}))
'''

[omenking]

@RauliL
So I have it the game working for the most part in npm run dev
Unsure how npm run build will need to be adjusted.

There are some things not working correctly such as the UI not opening on ESC and minor things, but in a much better place to debug now.

[omenking]

UI working as expected now.

I think the tricky part will be to get our tests /spec to run through webpack.

[omenking]

Reference for later:
https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js#L70-L185

[omenking]

electron/electron#5107

[omenking]

So I ran into cases where we're going to want to open up the webpack config file because the hardcoded source aliases provided by electron-webpack won't work with test code.

So I have it working with the exception that __dirname inside main.js is not correctly resolving.

Its probably for the best we manually configure our webpack.

const path = require('path');
const config_main = {
  target: 'electron-main',
  entry: path.resolve(__dirname, 'src/main/index.js'),
  output: {
    path    : path.resolve(__dirname, 'static'),
    filename: 'main.js'
  },
  externals: [{ 'electron-store': 'require("electron-store")' }],
  resolve: {
    alias: {
      main   : path.resolve(__dirname, 'src/main/'),
      common : path.resolve(__dirname, 'src/common/')
    }
  }
};

const config_renderer = {
  target: 'electron-renderer',
  entry: path.resolve(__dirname, 'src/renderer/index.js'),
  output: {
    path    : path.resolve(__dirname, 'static'),
    filename: 'renderer.js'
  },
  node: {
    __dirname: false
  },
  externals: [{ 'electron-store': 'require("electron-store")' }],
  resolve: {
    alias: {
      components : path.resolve(__dirname, 'src/renderer/components/'),
      core       : path.resolve(__dirname, 'src/renderer/core/'),
      states     : path.resolve(__dirname, 'src/renderer/states/'),
      ui         : path.resolve(__dirname, 'src/renderer/ui/'),
      common     : path.resolve(__dirname, 'src/common/'),
    }
  }
};

module.exports = [
  config_main,
  config_renderer
];

[omenking]

Turns out I had

  node: {
    __dirname: false
  },

In my renderer config instead of my main config. I will keep my comment above in case anyone likes my config file.