Migration to use `electron-webpack`

[develar]

Hi. First of all, thanks for excellent boilerplate.

Because it was clear, that electron-compile and electron-forge template for vue is definitely not a way to develop Vue application, I started to use this boilerplate.

But we can make it better and fix some current issues.

1. HMR doesn't work. Hot reload works, but... it is not productive. I want to just change my vue component and see result without reload.
2. TypeScript support.
3. Minor — easy update boilerplate and get rid of boilerplate files in the project.

I have fixed these issues in the https://github.com/electron-userland/electron-webpack. This new project is not called as electron-vue-scripts (as was planned initially), because, actually, in this boilerplate nothing specific for Vue and nothing prevents us to reuse boilerplate for any Electron application for any framework (or mix frameworks).

1. HMR — issue is that some loaders cannot detect hot reload mode if webpack-dev-server is running not as CLI. e.g. https://github.com/elm-community/elm-webpack-loader/issues/98 And I can confirm, that vue-loader also doesn't support HMR in this case. Yes — we can fight and investigate/fix/apply special configuration for each used loader, but it is maintenance hell. Actually, nothing prevent us to run webpack-dev-server using CLI and even more — we should, because it helps to compile faster (for the same reason why https://github.com/trivago/parallel-webpack was developed). So, CLI is used instead of programmatic usage in the electron-webpack.

   Now HMR works. And even more — there is a simple way to add HMR support for main process (mostly done on electron-webpack configuration side, but not documented/tested/helper script not provided).

2. Way "select option during project creation" is not flexible, because what if I want to add some feature later? For what we need to complicate things, if we simply can provide some preset and detect it? Or just detect loaders (check project dependencies and devDependencies) and automatically apply corresponding configuration.

   So, two presets is implemented: electron-webpack-ts and electron-webpack-vue. These presets are nothing more than just list of dependencies (so, user don't need to list all required, because, for example, for vue we need to add 4 dependencies). electron-webpack can work without these presets, i.e. ts-loader can be installed explicitly and it will be detected.

   For example, vue support is automatically configured if vue in the project dependency.

3. Webpack is amazing. Multiple async configs are supported. No need to reinvent the wheel. Do you want to compile the whole app — that's easy, just pass special configuration file: webpack --env.production --progress --bail --config node_modules/electron-webpack/webpack.app.config.js

   Here webpack.app.config.js is just a collection of renderer and main configs. No special script — all power of webpack in your hands and you are not limited. No boundaries are set by electron-webpack and you can use provided configuration files in a various scenarios (e.g. do not use yarn dev script, but run separately for better IDE support).

   And if user want, parallel-webpack can be also used. Maybe later we will provide special compile script but I doubt. electron-builder will support webpack configs soon and it will work better than any user solution / not electron-builder solution, because in-memory compilation will be used.

What do I suggest: change this boilerplate to use electron-webpack.

[SimulatedGREG]

@develar

I've actually put some thought into this recently and I like where this is going. Heading off here soon and will give this some thought. Will get back to you soon.

[develar]

DLL now also supported in the electron-webpack (make sense if you use iviewui or element UI libs and imports component on demand).

[SimulatedGREG]

@develar

Just wanted to say I haven't forgotten about this. I was out of town last week and have been catching up on work related items. And also I'll be heading out of town the end of this week as well. The only thing I ask at the moment is if you could try not to ask people to migrate to electron-webpack in other issues. Some of these issues can be simple fixes at times, and project migration isn't necessary something people want to do right now, at least until electron-vue officially announces such a migration. Thank you for all the great work as always.

[eberkund]

In regards to putting the build scripts in an NPM module, this is what laravel-mix does. I think it makes updating easier for sure and also allows you to check less code into your application repo.

[develar]

@eberkund Thanks for the link. Yes, it is how electron-webpack works :)

[develar]

Summer is a hot time :) I want to release electron-webpack 1.0, but I hope that electron-vue will be moved to electron-webpack somehow, and that's why stable version is not released. I hope you will find time in a couple of months.

[SimulatedGREG]

For those that are interested with electron-webpack, there has been a lot of hard work done between me and mostly @develar to get everything stable and I'm happy to announce the first draft for electron-vue is out now. It currently only supports using electron-builder and doesn't have any testing support as of yet. The overall plan is to keep all current features that electron-vue provides, and avoid major changes.

You can try it out now with the feat/electron-webpack branch.

vue init simulatedgreg/electron-vue#feat/electron-webpack my-project

Please let me know what issues you guys may run into and post them here.

[samsieber]

I had to change the command slightly to get it to work:

vue init simulatedgreg/electron-vue#feat/electron-webpack my-project

[DrSensor]

Can you also share the step for migrating existing project to use electron-webpack?

[ludoo0d0a]

What is the status of this issue ? Is it still planned to move to electron-webpack ? thx for awesome work !!

[geraldbiggs]

It may be my understanding of webpack alias resolving. After migration I could no longer use my old aliases. Everything else works well. Webpack config files are default except for alias:

// webpack.renderer.config.js
  resolve: {
    alias: {
      '@': path.join(__dirname, '../src/renderer'),
      'vue$': 'vue/dist/vue.esm.js',
      'components': path.join(__dirname, '../src/renderer/components'),
      'assets': path.resolve(__dirname, '../src/renderer/assets'),
      'mixins': path.resolve(__dirname, '../src/renderer/mixins'),
      'utils': path.resolve(__dirname, '../src/renderer/utils'),
      'filters': path.resolve(__dirname, '../src/renderer/filters')
    },

ERROR in ./src/renderer/assets Module not found: Error: Can't resolve 'assets/asset.js' in '/home/user/project/src/renderer/assets' @ ./src/renderer/assets/asset.js 35:0-39 @ ./src/renderer/main.js @ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server ./node_modules/electron-webpack/vue-renderer-entry.js ./src/renderer/main.js

[furai]

Any updates here? Was it integrated already?

[50l3r]

Any news? :)