Giter VIP home page Giter VIP logo

electron-webpack's Introduction

electron-webpack npm version Maintainers Wanted

Project Status: maintenance mode. Consider using Vite instead of Webpack.

Because setting up webpack in the electron environment shouldn't be difficult.

Maintainer Needed

This project is looking for active maintainers. Feel free to post here.

Overview

Modern web development practices today require a lot of setup with things like webpack to bundle your code, babel for transpiling, eslint for linting, and so much more that the list just goes on. Unfortunately when creating electron applications, all of that setup just became much more difficult. The primary aim of electron-webpack is to eliminate all preliminary setup with one simple install so you can get back to developing your application.

Why create a module and not a full boilerplate?

If you've been in the JavaScript world for even a short period of time, you are very aware that things are always changing, and development setup is no exclusion. Putting all development scripts into a single updatable module just makes sense. Sure a full featured boilerplate works too, but doing also involves needing to manually update those pesky webpack configuration files that some may call magic when something new comes out.

Here are some of the awesome features you'll find using electron-webpack...

Quick Start

Get started fast with electron-webpack-quick-start.

# create a directory of your choice, and copy template using curl
mkdir my-project && cd my-project
curl -fsSL https://github.com/electron-userland/electron-webpack-quick-start/archive/master.tar.gz | tar -xz --strip-components 1

# or copy template using git clone
git clone https://github.com/electron-userland/electron-webpack-quick-start.git
cd electron-webpack-quick-start
rm -rf .git

# install dependencies
yarn

If you already have an existing project, or are looking for a custom approach outside of the quick start template, make sure to read over the Core Concepts, Project Structure, and Development sections of electron-webpack's documentation.

Next Steps

Make sure to take advantage of the detailed documentation that electron-webpack provides. It covers everything from how things work internally, adding custom configurations, and building your application.

Contributing

Feel free to grab an issue and fix it or to share your features and improvements - PRs are always welcome!
However, in order for your contribution to be property included in the automatically generated release notes, please use our standard format for your commit messages.

electron-webpack's People

Contributors

adam-lynch avatar akiver avatar audiolion avatar christophpre avatar develar avatar fabiospampinato avatar glektarssza avatar jordan-sf avatar loopmode avatar marceloavf avatar movingobjects avatar oimou avatar omeryagmurlu avatar qingwei-li avatar roytan883 avatar saswatb avatar scvnc avatar sentoxaio avatar shahkeyur avatar simulatedgreg avatar stristr avatar tai2 avatar tmdh avatar vgribdev avatar victorleach96 avatar wschella avatar xdk78 avatar xinpingwang avatar yokitoki avatar zenios avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

electron-webpack's Issues

`/static` folder path not working in production

The path to the static folder (used via __static) doesn't work for us in the published version.
It does not get properly resolved to the runtime path, instead it keeps using the path to /static from development-time/compile-time.

Example

In development:

  • Project is in D:\projects\myproject
  • We have a file D:\projects\myproject\static\file.txt
  • In code, we do fs.readFileSync(__static + '/file.txt')
  • App reads file from D:\projects\myproject\static\file.txt
  • works!

In published app:

  • App was built via yarn dist
  • App is installed in C:\Users\loopm\AppData\Local\Programs\myproject
  • App writes logs in C:\Users\loopm\AppData\Roaming\myproject
  • App still reads static/file.txt from D:\projects\myproject\static\file.txt
  • fails!

Currently, we avoid using the static folder at all for this reason, doing some heavy workflows/workarounds.

  • The same thing happens when building on Mac
  • Can this be a usage error on our side?
  • Should I set up an example repo?

Preload on the webPreferences not working

in my electron-webpack.json

        "extraEntries": [
            "@/preload.js"
        ],
        "sourceDirectory": "src/main"
    }

and in my main process,
in src/main/create-window.js

const win = new BrowserWindow({
    minWidth: 1024,
    minHeight: 768,
    width: 1024,
    height: 768,
    webPreferences: {
      nodeIntegration: isDev,
      preload: path.join(__dirname, './preload.js')
    },
    show: false
  })

however after I loaded the dev app, the script is not being loaded.

Unit tests

I've noticed that there is some kind of support for tests, because of node_modules/electron-webpack/webpack.test.config.js, but it does not seem to be fully functional, nor documented.

Where are we on tests, is that something that will be supported in the future, or should one be able to write unit tests without the help of electron-webpack?

Revamp Documentation

Similar to how thorough electron-vue's documentation is, I would also like to create thorough documentation for electron-webpack before an official migration of electron-vue to use electron-wepack. This module has great potential and great documentation is a must for entry level users! In the end, I would like to explain what some people call magic and provide further information about customization.

I see that there is already some inside the docs/ folder, but would you consider moving the docs to GitBook? Some of the major benefits of moving are better styling /organization and improved SEO optimization to help the module spread around the internet.

Can't resolve 'ejs-html-loader'

I does't use EJS. Only src/index.ejs

In v0.10.0 got this error:

  ERROR in   Error: Child compilation failed:
    Entry module not found: Error: Can't resolve 'ejs-html-loader' in '/run/media/  alex/LinWin/Develop/command-editor':
    Error: Can't resolve 'ejs-html-loader' in '/run/media/alex/LinWin/Develop/comm  and-editor'
    
    - compiler.js:76 
      [command-editor]/[html-webpack-plugin]/lib/compiler.js:76:16
    
    - Compiler.js:304 compile
      [command-editor]/[webpack]/lib/Compiler.js:304:11
    
    - Compiler.js:520 applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compiler.js:520:14
    
    - Tapable.js:202 next
      [command-editor]/[tapable]/lib/Tapable.js:202:11
    
    - CachePlugin.js:62 Compiler.<anonymous>
      [command-editor]/[webpack]/lib/CachePlugin.js:62:5
    
    - Tapable.js:206 Compiler.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:206:13
    
    - Compiler.js:517 compilation.seal.err
      [command-editor]/[webpack]/lib/Compiler.js:517:11
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:654 self.applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compilation.js:654:19
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:645 self.applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compilation.js:645:11
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:640 self.applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compilation.js:640:10
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:636 sealPart2
      [command-editor]/[webpack]/lib/Compilation.js:636:9
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:579 Compilation.seal
      [command-editor]/[webpack]/lib/Compilation.js:579:8
    
    - Compiler.js:514 applyPluginsParallel.err
      [command-editor]/[webpack]/lib/Compiler.js:514:17
    
    - Tapable.js:289 
      [command-editor]/[tapable]/lib/Tapable.js:289:11
    
    - Compilation.js:481 _addModuleChain
      [command-editor]/[webpack]/lib/Compilation.js:481:11
    
    - Compilation.js:370 Compilation.errorAndCallback
      [command-editor]/[webpack]/lib/Compilation.js:370:4
    
    - Compilation.js:391 moduleFactory.create
      [command-editor]/[webpack]/lib/Compilation.js:391:12
    
    - From previous event:
    
    - compiler.js:69 Object.compileTemplate
      [command-editor]/[html-webpack-plugin]/lib/compiler.js:69:10
    
    - index.js:47 Compiler.<anonymous>
      [command-editor]/[html-webpack-plugin]/index.js:47:40
    
    - Tapable.js:293 Compiler.applyPluginsParallel
      [command-editor]/[tapable]/lib/Tapable.js:293:14
    
    - Compiler.js:509 applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compiler.js:509:9
    
    - Tapable.js:195 Compiler.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compiler.js:502 Compiler.compile
      [command-editor]/[webpack]/lib/Compiler.js:502:8
    
    - Compiler.js:82 compiler.applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compiler.js:82:18
    
    - Tapable.js:202 next
      [command-editor]/[tapable]/lib/Tapable.js:202:11
    
    - Shared.js:161 Compiler.compilerInvalid
      [command-editor]/[webpack-dev-middleware]/lib/Shared.js:161:5
    
    - Tapable.js:204 next
      [command-editor]/[tapable]/lib/Tapable.js:204:14
    
    - CachePlugin.js:32 Compiler.compiler.plugin
      [command-editor]/[webpack]/lib/CachePlugin.js:32:5
    
    - Tapable.js:206 Compiler.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:206:13
    
    - Compiler.js:47 Watching._go
      [command-editor]/[webpack]/lib/Compiler.js:47:17
    
    - Compiler.js:39 Watching.compiler.readRecords.err
      [command-editor]/[webpack]/lib/Compiler.js:39:9
    
    - Compiler.js:395 Compiler.readRecords
      [command-editor]/[webpack]/lib/Compiler.js:395:11
    
    - Compiler.js:36 new Watching
      [command-editor]/[webpack]/lib/Compiler.js:36:17
    
    - Compiler.js:226 Compiler.watch
      [command-editor]/[webpack]/lib/Compiler.js:226:20
    
    - Shared.js:176 Object.startWatch
      [command-editor]/[webpack-dev-middleware]/lib/Shared.js:176:29
    
    - Shared.js:238 Shared
      [command-editor]/[webpack-dev-middleware]/lib/Shared.js:238:8
    
    - middleware.js:22 module.exports
      [command-editor]/[webpack-dev-middleware]/middleware.js:22:15
    
    - Server.js:68 new Server
      [command-editor]/[webpack-dev-server]/lib/Server.js:68:20
    
    - webpack-dev-server.js:389 startDevServer
      [command-editor]/[webpack-dev-server]/bin/webpack-dev-server.js:389:12
    
    - webpack-dev-server.js:353 processOptions
      [command-editor]/[webpack-dev-server]/bin/webpack-dev-server.js:353:3
    
  
  Child html-webpack-plugin for "index.html":
      
      ERROR in Entry module not found: Error: Can't resolve 'ejs-html-loader' in '/run/media/alex/LinWin/Develop/command-editor'

I try install this

$ yarn add ejs-html-loader -D

And got another error

  
  ERROR in   Error: Child compilation failed:
    Module build failed: Error: Cannot find module 'ejs'
    
    - module.js:11 require
      internal/module.js:11:18
    
    - render.js:10 Object.<anonymous>
      [command-editor]/[ejs-html-loader]/lib/render.js:10:12
    
    - module.js:11 require
      internal/module.js:11:18
    
    - index.js:12 Object.<anonymous>
      [command-editor]/[ejs-html-loader]/lib/index.js:12:16
    
    - module.js:11 require
      internal/module.js:11:18
    
    - loadLoader.js:13 loadLoader
      [command-editor]/[loader-runner]/lib/loadLoader.js:13:17
    
    
    - Error: Cannot find module 'ejs'
    
    - module.js:11 require
      internal/module.js:11:18
    
    - render.js:10 Object.<anonymous>
      [command-editor]/[ejs-html-loader]/lib/render.js:10:12
    
    - module.js:11 require
      internal/module.js:11:18
    
    - index.js:12 Object.<anonymous>
      [command-editor]/[ejs-html-loader]/lib/index.js:12:16
    
    - module.js:11 require
      internal/module.js:11:18
    
    - loadLoader.js:13 loadLoader
      [command-editor]/[loader-runner]/lib/loadLoader.js:13:17
    
    
    - compiler.js:76 
      [command-editor]/[html-webpack-plugin]/lib/compiler.js:76:16
    
    - Compiler.js:304 compile
      [command-editor]/[webpack]/lib/Compiler.js:304:11
    
    - Compiler.js:520 applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compiler.js:520:14
    
    - Tapable.js:202 next
      [command-editor]/[tapable]/lib/Tapable.js:202:11
    
    - CachePlugin.js:62 Compiler.<anonymous>
      [command-editor]/[webpack]/lib/CachePlugin.js:62:5
    
    - Tapable.js:206 Compiler.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:206:13
    
    - Compiler.js:517 compilation.seal.err
      [command-editor]/[webpack]/lib/Compiler.js:517:11
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:654 self.applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compilation.js:654:19
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:645 self.applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compilation.js:645:11
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:640 self.applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compilation.js:640:10
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:636 sealPart2
      [command-editor]/[webpack]/lib/Compilation.js:636:9
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:579 Compilation.seal
      [command-editor]/[webpack]/lib/Compilation.js:579:8
    
    - Compiler.js:514 applyPluginsParallel.err
      [command-editor]/[webpack]/lib/Compiler.js:514:17
    
    - Tapable.js:289 
      [command-editor]/[tapable]/lib/Tapable.js:289:11
    
    - Compilation.js:481 _addModuleChain
      [command-editor]/[webpack]/lib/Compilation.js:481:11
    
    - Compilation.js:452 processModuleDependencies.err
      [command-editor]/[webpack]/lib/Compilation.js:452:13
    
    - next_tick.js:131 _combinedTickCallback
      internal/process/next_tick.js:131:7
    
    - From previous event:
    
    - compiler.js:69 Object.compileTemplate
      [command-editor]/[html-webpack-plugin]/lib/compiler.js:69:10
    
    - index.js:47 Compiler.<anonymous>
      [command-editor]/[html-webpack-plugin]/index.js:47:40
    
    - Tapable.js:293 Compiler.applyPluginsParallel
      [command-editor]/[tapable]/lib/Tapable.js:293:14
    
    - Compiler.js:509 applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compiler.js:509:9
    
    - Tapable.js:195 Compiler.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compiler.js:502 Compiler.compile
      [command-editor]/[webpack]/lib/Compiler.js:502:8
    
    - Compiler.js:82 compiler.applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compiler.js:82:18
    
    - Tapable.js:202 next
      [command-editor]/[tapable]/lib/Tapable.js:202:11
    
    - Shared.js:161 Compiler.compilerInvalid
      [command-editor]/[webpack-dev-middleware]/lib/Shared.js:161:5
    
    - Tapable.js:204 next
      [command-editor]/[tapable]/lib/Tapable.js:204:14
    
    - CachePlugin.js:32 Compiler.compiler.plugin
      [command-editor]/[webpack]/lib/CachePlugin.js:32:5
    
    - Tapable.js:206 Compiler.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:206:13
    
    - Compiler.js:47 Watching._go
      [command-editor]/[webpack]/lib/Compiler.js:47:17
    
  
  Child html-webpack-plugin for "index.html":
      [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 1.39 kB {0} [built] [failed] [1 error]
      
      ERROR in ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs
      Module build failed: Error: Cannot find module 'ejs'
          at Function.Module._resolveFilename (module.js:485:15)
          at Function.Module._load (module.js:437:25)
          at Module.require (module.js:513:17)
          at require (internal/module.js:11:18)
          at Object.<anonymous> (/run/media/alex/LinWin/Develop/command-editor/node_modules/ejs-html-loader/lib/render.js:10:12)
          at Module._compile (module.js:569:30)
          at Object.Module._extensions..js (module.js:580:10)
          at Module.load (module.js:503:32)
          at tryModuleLoad (module.js:466:12)
          at Function.Module._load (module.js:458:3)
          at Module.require (module.js:513:17)
          at require (internal/module.js:11:18)
          at Object.<anonymous> (/run/media/alex/LinWin/Develop/command-editor/node_modules/ejs-html-loader/lib/index.js:12:16)
          at Module._compile (module.js:569:30)
          at Object.Module._extensions..js (module.js:580:10)
          at Module.load (module.js:503:32)
          at tryModuleLoad (module.js:466:12)
          at Function.Module._load (module.js:458:3)
          at Module.require (module.js:513:17)
          at require (internal/module.js:11:18)
          at loadLoader (/run/media/alex/LinWin/Develop/command-editor/node_modules/loader-runner/lib/loadLoader.js:13:17)
          at iteratePitchingLoaders (/run/media/alex/LinWin/Develop/command-editor/node_modules/loader-runner/lib/LoaderRunner.js:169:2)

After installation, one more ...

$ yarn add ejs -D 
  ERROR in   Error: Child compilation failed:
    (Emitted value instead of an instance of Error) ejs-html-loader
    /run/media/alex/LinWin/Develop/command-editor/src/index.ejs:5
        3|   <head>
        4|     <meta charset="utf-8">
     >> 5|     <title><%= htmlWebpackPlugin.options.title %></title>
        6|     <% if (htmlWebpackPlugin.options.nodeModules) { %>
        7|       <!-- Add `node_modules/` to global paths so `require` works prope  rly in development -->
        8|       <script>
    htmlWebpackPlugin is not defined:
    NonErrorEmittedError: (Emitted value instead of an instance of Error) ejs-html  -loader
    /run/media/alex/LinWin/Develop/command-editor/src/index.ejs:5
        3|   <head>
        4|     <meta charset="utf-8">
     >> 5|     <title><%= htmlWebpackPlugin.options.title %></title>
        6|     <% if (htmlWebpackPlugin.options.nodeModules) { %>
        7|       <!-- Add `node_modules/` to global paths so `require` works prope  rly in development -->
        8|       <script>
    htmlWebpackPlugin is not defined
    
    - compiler.js:76 
      [command-editor]/[html-webpack-plugin]/lib/compiler.js:76:16
    
    - Compiler.js:304 compile
      [command-editor]/[webpack]/lib/Compiler.js:304:11
    
    - Compiler.js:520 applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compiler.js:520:14
    
    - Tapable.js:202 next
      [command-editor]/[tapable]/lib/Tapable.js:202:11
    
    - CachePlugin.js:62 Compiler.<anonymous>
      [command-editor]/[webpack]/lib/CachePlugin.js:62:5
    
    - Tapable.js:206 Compiler.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:206:13
    
    - Compiler.js:517 compilation.seal.err
      [command-editor]/[webpack]/lib/Compiler.js:517:11
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:654 self.applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compilation.js:654:19
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:645 self.applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compilation.js:645:11
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:640 self.applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compilation.js:640:10
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:636 sealPart2
      [command-editor]/[webpack]/lib/Compilation.js:636:9
    
    - Tapable.js:195 Compilation.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compilation.js:579 Compilation.seal
      [command-editor]/[webpack]/lib/Compilation.js:579:8
    
    - Compiler.js:514 applyPluginsParallel.err
      [command-editor]/[webpack]/lib/Compiler.js:514:17
    
    - Tapable.js:289 
      [command-editor]/[tapable]/lib/Tapable.js:289:11
    
    - Compilation.js:481 _addModuleChain
      [command-editor]/[webpack]/lib/Compilation.js:481:11
    
    - Compilation.js:452 processModuleDependencies.err
      [command-editor]/[webpack]/lib/Compilation.js:452:13
    
    - next_tick.js:131 _combinedTickCallback
      internal/process/next_tick.js:131:7
    
    - From previous event:
    
    - compiler.js:69 Object.compileTemplate
      [command-editor]/[html-webpack-plugin]/lib/compiler.js:69:10
    
    - index.js:47 Compiler.<anonymous>
      [command-editor]/[html-webpack-plugin]/index.js:47:40
    
    - Tapable.js:293 Compiler.applyPluginsParallel
      [command-editor]/[tapable]/lib/Tapable.js:293:14
    
    - Compiler.js:509 applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compiler.js:509:9
    
    - Tapable.js:195 Compiler.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:195:46
    
    - Compiler.js:502 Compiler.compile
      [command-editor]/[webpack]/lib/Compiler.js:502:8
    
    - Compiler.js:82 compiler.applyPluginsAsync.err
      [command-editor]/[webpack]/lib/Compiler.js:82:18
    
    - Tapable.js:202 next
      [command-editor]/[tapable]/lib/Tapable.js:202:11
    
    - Shared.js:161 Compiler.compilerInvalid
      [command-editor]/[webpack-dev-middleware]/lib/Shared.js:161:5
    
    - Tapable.js:204 next
      [command-editor]/[tapable]/lib/Tapable.js:204:14
    
    - CachePlugin.js:32 Compiler.compiler.plugin
      [command-editor]/[webpack]/lib/CachePlugin.js:32:5
    
    - Tapable.js:206 Compiler.applyPluginsAsyncSeries
      [command-editor]/[tapable]/lib/Tapable.js:206:13
    
    - Compiler.js:47 Watching._go
      [command-editor]/[webpack]/lib/Compiler.js:47:17
    
    - Compiler.js:39 Watching.compiler.readRecords.err
      [command-editor]/[webpack]/lib/Compiler.js:39:9
    
    - Compiler.js:395 Compiler.readRecords
      [command-editor]/[webpack]/lib/Compiler.js:395:11
    
    - Compiler.js:36 new Watching
      [command-editor]/[webpack]/lib/Compiler.js:36:17
    
    - Compiler.js:226 Compiler.watch
      [command-editor]/[webpack]/lib/Compiler.js:226:20
    
    - Shared.js:176 Object.startWatch
      [command-editor]/[webpack-dev-middleware]/lib/Shared.js:176:29
    
    - Shared.js:238 Shared
      [command-editor]/[webpack-dev-middleware]/lib/Shared.js:238:8
    
    - middleware.js:22 module.exports
      [command-editor]/[webpack-dev-middleware]/middleware.js:22:15
    
    - Server.js:68 new Server
      [command-editor]/[webpack-dev-server]/lib/Server.js:68:20
    
    - webpack-dev-server.js:389 startDevServer
      [command-editor]/[webpack-dev-server]/bin/webpack-dev-server.js:389:12
    
    - webpack-dev-server.js:353 processOptions
      [command-editor]/[webpack-dev-server]/bin/webpack-dev-server.js:353:3
    
  
  Child html-webpack-plugin for "index.html":
      [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 0 bytes {0} [built] [1 error]
      
      ERROR in ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs
      (Emitted value instead of an instance of Error) ejs-html-loader
      /run/media/alex/LinWin/Develop/command-editor/src/index.ejs:5
          3|   <head>
          4|     <meta charset="utf-8">
       >> 5|     <title><%= htmlWebpackPlugin.options.title %></title>
          6|     <% if (htmlWebpackPlugin.options.nodeModules) { %>
          7|       <!-- Add `node_modules/` to global paths so `require` works properly in development -->
          8|       <script>
      
      htmlWebpackPlugin is not defined
  Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/vuetify/dist/vuetify.min.css:

How to move from electron-compile?

Hello!

Can you write some tutorial how to move from electron-compile. Because right now this is common way to build app, so it would be very useful. For example right now I have electron-forge with babel, but want to build via electron-webpack, so what main steps I need to do?

.html and .css files don't load correctly

I have a working electron app. I've added electron-webpack to it.
When compiling with webpack, it throws a warning that .html and .css files cannot be parsed.
I've added the css-loader and html-loader plugins.
My webpack config:

module.exports = {
    entry: "./src/app.js",
    module: {
        loaders: [
            {
                test: /\.css/,
                loaders: ["style-loader", "css-loader"]
            },
            {
                test: /\.(png|jpg|gif)$/,
                loaders: ["url-loader?limit=5000&name=img/img-[hash:6].[ext]"]
            },
            {
                test: /\.html$/,
                loaders: ["html-loader"]
            }
        ]
    }
};

My .html file is loaded using loadURL and the .css files are loaded from inside the template (via the link tag).

Is there anything else I need to do in order to make it work?

Question: how to link CSS

Hi. I've read the doc through and I can't understand how to do this simple task:
I want to have a <link rel='stylesheet'/> in my <head></head> when the app loads.

I know you can extend the webpack configuration, but I've read that electron-webpack already includes a css loader. If so then where should I put the css file so that it's loaded and added? Maybe it's a simple configuration I have to put in the package.json, but the doc says absolutely nothing about this.

Electron-webpack is awesome for the whole webpack dev server thing, saves a lot of time, but I'd really like to know how to add css to my html.

IPC communication fails silently for electron-redux between renderer & main thread

Hi,

I had used electron-redux with electron-forge and everything works very well but while using it with electron-webpack, the renderer fails to communicate with the main thread using IPC. I tried out the exact same setup that I had with electron-forge but it still doesn't work. I think it's something specific to electron-webpack as the main thread is successfully in communicating with the renderer but the opposite fails.

I have also opened an issue in the electron-redux repo hardchor/electron-redux/#63.

Any ideas on what can cause such issue?

WatchFilterPlugin configuration

I'm looking through code which generates configurations and accidentally noticed that there is an array called watchIgnore which is populated, but never used for anything instead of logging. There might be an issue here.

const watchIgnore = [
configurator.commonDistDirectory,
path.join(configurator.projectDir, "build"),
path.join(configurator.projectDir, "dist"),
path.join(configurator.projectDir, "node_modules"),
path.join(configurator.projectDir, "static"),
path.join(configurator.projectDir, ".idea"),
path.join(configurator.projectDir, ".vscode"),
configurator.getSourceDirectory(configurator.type === "main" ? "renderer" : "main")
]
if (configurator.type !== "test") {
watchIgnore.push(path.join(configurator.projectDir, "test"))
}
if (debug.enabled) {
debug(`Watch ignore: ${watchIgnore.join(", ")}`)
}
// watch common code
let commonSourceDir = configurator.electronWebpackConfiguration.commonSourceDirectory
if (commonSourceDir == null) {
// not src/common, because it is convenient to just put some code into src to use it
commonSourceDir = path.join(configurator.projectDir, "src")
}
const alienSourceDir = configurator.getSourceDirectory(configurator.type === "main" ? "renderer" : "main")
configurator.plugins.push(new WatchFilterPlugin(file => {
return file === commonSourceDir || (isAncestor(file, commonSourceDir!!) && (alienSourceDir != null && !file.startsWith(alienSourceDir)))
}, require("debug")(`electron-webpack:watch-${configurator.type}`)))

db files not included in package

node: 8.6.0
npm 5.3.0
yarn 1.1.0
OS: Windows 10

Here is my original folder structure

root
├── data
│ └── mydatabase.db3
├── src
│ ├── main
│ │ └── index.js
│ ├── renderer
│ │ └── index.js
│ └──
└── package.json

I want to have the db3 file included in the package.

I tried moving the folder around, inside src, inside common, and even static, but still not included in the package when i do yarn dist.

How can I do this?

Awesome project btw!

Using HMR in Main Thread while debugging with Chrome Debugger becomes messy quickly...

Hi,

Using the debugger with the main thread doesn't work that well as every time there's a reload of the main thread the new chrome node debugger link is different and the debugger can't reconnect as the previous connect isn't rested but a new one is started. Is there a way around it? Chrome is able to reconnect to the same socket after the process reloads and becomes available (at least based on the info I have seen).

So, is there a way to make sure that the debugger becomes available in the same socket after every reload?

HMR not working - a detail missing in docs?

Hi. For me HMR doesn't work out of the box.
I have to manually accept and rerender like this:

// renderer/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const rootEl = document.getElementById('app');

ReactDOM.render(<App />, rootEl);
if (module.hot) {
    module.hot.accept('./App', () => {
        const NextApp = require('./App').default;
        ReactDOM.render(<NextApp />, rootEl);
    });
}

When I have the manual if (module.hot) ... accept in place, it works just fine. (for JS files)

If I don't do it, I get a full page reload with this output in the browser console:

[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Cannot apply update. Need to do a full reload!
module.exports @ log.js:25
(anonymous) @ dev-server.js:34
log.js?4244:25 [HMR] Error: Aborted because ./src/renderer/App.js is not accepted
Update propagation: ./src/renderer/App.js -> ./src/renderer/index.js -> 0
    at hotApply (http://localhost:9080/renderer.js:441:30)
    at http://localhost:9080/renderer.js:290:21
    at <anonymous>
module.exports @ log.js:25
(anonymous) @ dev-server.js:35
Navigated to http://localhost:9080/

Is something is wrong with my setup, or is the if (module.hot) ...accept... detail just missing from the documentation?
I did modify the setup to accept stage-0 and legacy-decorators (see #28) but I don't think it should matter in this context.

compile error when set renderer to null

compile throw an error when render.sourceDirectory is null

package.json config:

"electronWebpack": {
    "whiteListedModules": [
      "chokidar"
    ],
    "main": {
      "sourceDirectory": "src"
    },
    "renderer": {
      "sourceDirectory": null
    }
  }

run:

electron-webpack dev

error:

Error: Cannot find entry file src\renderer\index.ts (or .js)
    at D:\electron\node_modules\electron-webpack\src\main.ts:290:11
From previous event:
    at computeEntryFile (D:\electron\node_modules\electron-webpack\out\main.js:96:22)
    at D:\electron\node_modules\electron-webpack\src\main.ts:182:35
From previous event:
    at WebpackConfigurator.configure (D:\electron\node_modules\electron-webpack\out\main.js:349:11)
....

but when run only electron-webpack everything is ok

Cannot specify modified webpack config

Trying to follow the example here, after adding the webpackConfig key to the renderer object, I get this error when I run electron-webpack dev

Error: Configuration is invalid.
    configuration.renderer should be one of these:
    object { dll?, sourceDirectory? } | {
        "type": "null"
    }
    Details:
        * configuration.renderer has an unknown property 'webpackConfig'. These properties are valid:
            object { dll?, sourceDirectory? }
        * configuration.renderer should be null:
         {
            "type": "null"
         }

I've tried specifying this in both package.json and electron-webpack.json, neither work. I've been able to get other settings such as title working in the electronWebpack config object, the problem seems specifically related to the webpackConfig key.

"electronWebpack": {
    "renderer": {
        "webpackConfig": "webpack.renderer.additions.js"
    }
}

Error: spawn node-pre-gyp ENOENT

when yarn or npm install and happens

node install

events.js:182
throw er; // Unhandled 'error' event
^

Error: spawn node-pre-gyp ENOENT
at exports._errnoException (util.js:1016:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:189:19)
at onErrorNT (internal/child_process.js:366:16)
at _combinedTickCallback (internal/process/next_tick.js:102:11)
at process._tickCallback (internal/process/next_tick.js:161:9)
at Function.Module.runMain (module.js:607:11)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3

Error in 0.14.0

My build script has reported an error regarding running electron-webpack dll.

I did not spot any breaking changes in the release notes, what am I doing wrong?

Error on getting the server port when upgrading to 1.9.0

Seems like 1.9.0 introduced a new bug regarding reading the dev server port.

C:\Users\Resi\Projects\electron-webpack-quick-start-master> yarn dev
yarn run v1.2.1
$ electron-webpack dev

C:\Users\Resi\Projects\electron-webpack-quick-start-master\node_modules\electron-webpack\src\util.ts:40
        const port = server.address().port
                            ^
TypeError: Cannot read property 'port' of null
    at Server.server.listen (C:\Users\Resi\Projects\electron-webpack-quick-start-master\node_modules\electron-webpack\src\util.ts:40:29)
    at Object.onceWrapper (events.js:314:30)
    at emitNone (events.js:110:20)
    at Server.emit (events.js:207:7)
    at emitListeningNT (net.js:1371:10)
    at _combinedTickCallback (internal/process/next_tick.js:135:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Cannot find module while using electron-remote

Hey all,

I am trying to use electron-remote where it spins out a hidden browser window to run functions in the background. So, the approach is:

import { requireTaskPool } from 'electron-remote';

const myCoolModule = requireTaskPool(require.resolve('./my-cool-module'))

But, using electron-webpack, electron complains Uncaught Error: Cannot find module. Is there a way to make sure the import works?

My guess is that this is happening because electron-remote is trying to handle the module directly, like it would in a traditional context while our imports are being handled by Webpack.

Thanks for all the help @develar and the awesome package!

Native dependencies

Is there currently a good story for using native dependencies such as sqlite3?

electron-rebuild is an excellent package for this, but it requires certain hacks when used with webpack, such as eval(`require("${packageName}")`), or explicitly editing webpack externals.

Support for React?

First of all: thanks a lot for making this, it is very promising, especially due to its tight integration with electron-builder!

My app is based on React, but the current configuration doesn't seem to support this. If I try to include electron-webpack, it complains invalid tokens in JSX files. Is there a chance to create a React adapter for electron-webpack?

BTW: It would also be fantastic if Sass was supported.

Integrate TypeScript and Angular 2

Hallo,
is there some boilerplate project or a tutorial how one could integrate TypeScript and Angular 2 with electron-webpack? I'm new to Webpack and Electron and can't figure out what I have to do to support this.

Thanks,
Steven

HMR for stylesheets

Currently, ExtractTextPlugin is used for stylesheets in development mode, and HMR does not work. You need to manually reload the page.

However, there is a really simple fix for this, using css-hot-loader in combination. See webpack-contrib/extract-text-webpack-plugin#384 (comment)

It's a pretty much non-critical change and a big win for developers.
Of course it should only be applied when in development, not when publishing dist.

I wanted to add a separate pull request, but I'm still a bloody noob in terms of github pull requests.
So, unfortunately this addition landed in the same PR I had already created: #28

sqlite3 problem

Hi,
im trying to run electron-webpack with sqlite3 and i noticed problem.
When im using yarn:
yarn add sqlite3
there is created compiled file inside directory:
\node_modules\sqlite3\lib\binding\node-v48-win32-x64\node_sqlite3.node"
nice, its compiled already, but application throws error:
Uncaught Error: Cannot find module 'node_modules\sqlite3\lib\binding\electron-v1.7-win32-x64\node_sqlite3.node'
electron-builder i think, created node-v48-win32-x64 instead of electron-v1.7 folder.
So to make it works, Im using npm:
npm install sqlite3 --build-from-source --runtime=electron --target=1.7.8 --dist-url=https://atom.io/download/electron
and its work now, folder electron-v1.7-win32-x64 is created. But when i add another library with yarn, its deleted and there is new version under node-v48-win32-x64 - wrong.

Missing file?

When trying to run yarn dev, I get the following error. ("Das System kann die angegebene Datei nicht finden." = "System was unable to find the file")

I am on

  • Windows 10 x64
  • node 8.5.0 (via nvm)
  • yarn 0.24.5
  • npm 5.3.0
$ yarn dev
yarn dev v0.24.5
$ electron-webpack dev
┏ Renderer -------------------

  CreateProcess failed with error 2: Das System kann die angegebene Datei nicht finden.

┗ ----------------------------
Error: Renderer WDS exited with code 0
    at ChildProcessManager.child.on.code (D:\Projects\electron\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\ChildProcessManager.ts:60:32)
    at emitTwo (events.js:125:13)
    at ChildProcess.emit (events.js:213:7)
    at maybeClose (internal/child_process.js:927:16)
    at Socket.stream.socket.on (internal/child_process.js:348:11)
    at emitOne (events.js:115:13)
    at Socket.emit (events.js:210:7)
    at Pipe._handle.close [as _onclose] (net.js:545:12)
From previous event:
    at D:\Projects\electron\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\WebpackDevServerManager.ts:47:10
    at Generator.next (<anonymous>)
    at D:\Projects\electron\electron-webpack-quick-start\node_modules\graceful-fs\polyfills.js:287:18
    at FSReqWrap.oncomplete (fs.js:154:5)
From previous event:
    at startRenderer (D:\Projects\electron\electron-webpack-quick-start\node_modules\electron-webpack\out\dev\WebpackDevServerManager.js:72:21)
    at D:\Projects\electron\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\dev-runner.ts:37:7
    at Generator.next (<anonymous>)
From previous event:
    at DevRunner.start (D:\Projects\electron\electron-webpack-quick-start\node_modules\electron-webpack\out\dev\dev-runner.js:122:11)
    at D:\Projects\electron\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\dev-runner.ts:131:19
    at Generator.next (<anonymous>)
From previous event:
    at main (D:\Projects\electron\electron-webpack-quick-start\node_modules\electron-webpack\out\dev\dev-runner.js:42:22)
    at Object.<anonymous> (D:\Projects\electron\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\dev-runner.ts:134:1)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at runInDevMode (D:\Projects\electron\electron-webpack-quick-start\node_modules\electron-webpack\src\cli.ts:37:2)
    at Object.__dirname.default.command.command.command.command.command.argv [as handler] (D:\Projects\electron\electron-webpack-quick-start\node_modules\electron-webpack\src\cli.ts:17:16)
    at Object.self.runCommand (D:\Projects\electron\electron-webpack-quick-start\node_modules\yargs\lib\command.js:233:22)
    at Object.Yargs.self._parseArgs (D:\Projects\electron\electron-webpack-quick-start\node_modules\yargs\yargs.js:990:30)
    at Object.get [as argv] (D:\Projects\electron\electron-webpack-quick-start\node_modules\yargs\yargs.js:927:19)
    at Object.<anonymous> (D:\Projects\electron\electron-webpack-quick-start\node_modules\electron-webpack\src\cli.ts:17:16)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
┏ Main -----------------------

  Hash: 5905c4b8b84576d437f9
  Version: webpack 3.6.0
  Time: 876ms
    Asset     Size  Chunks             Chunk Names
  main.js  37.4 kB       0  [emitted]  main
  [./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js] ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js 559 bytes {0} [built]
  [./src/main/index.js] ./src/main/index.js 1.22 kB {0} [built]
  [electron] external "electron" 42 bytes {0} [not cacheable]
  [electron-webpack/out/electron-main-hmr/HmrClient] external "electron-webpack/out/electron-main-hmr/HmrClient" 42 bytes {0} [not cacheable]
  [source-map-support/source-map-support.js] external "source-map-support/source-map-support.js" 42 bytes {0} [not cacheable]
     [0] multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/main/index.js 40 bytes {0} [built]

┗ ----------------------------
                                                                                                                                                      

What's weird is:

  • There is no node_modules\electron-webpack\src folder at all
  • Still it manages to name src\dev\ChildProcessManager.ts:60:32 with line and column number as the culprit
  • What I do have is node_modules\electron-webpack\src\out\dev\ChildProcessManager.js, and a ChildProcessManager.d.ts

What I would like very much: run yarn dev and the dev server starts up! :)
I guess some magic is involved here and it fails to work on my windows machine?

Also, I never intended to use typescript, I have zero experience with it, and maybe ChildProcessManager.ts doesn't even need to be there?

Renderer warning: .then() only accepts functions

Hey @develar, great job on this tooling! I'm looking forward for first release and for your cooperation with Greg on this!

While trying out electron-webpack I'm constantly getting the following message if I run yarn dev:

┏ Renderer -------------------

  (node:26348) Warning: .then() only accepts functions but was passed: [object Undefined], [object Undefined]

┗ ----------------------------

No stack trace emitted, process.traceProcessWarnings = true didn't help.
I've tried to boil it down to minimal example and got to the following state. So it seems to not be related to anything external like Vue, TypeScript, only the electron-webpack dev command itself. Also, app package prepared by electron-builder also doesn't seem to emit this warning.

Unfortunately I'm not that experienced in Node.js / Electron development so I wasn't able to properly debug the issue -- didn't manage to set debugger breakpoints in bluebird module.

Do you have any thoughts?

Support for tsx as entry file

Thank you for this excellent project.
Is there any guide on how to configure a React project with typescript with electron-webpack?

Weird error after updating to 1.6.1 from 1.5.0

I'm using element-ui and after updating from 1.5.0 to 1.6.1 things started breaking and I cannot yarn dev anymore. Not just element-ui, things are breaking on electron-vue boilerplate side too - static images are throwing a 404 in dev mode (and not after building). I've not changed anything else other than updating this package. I've downgraded back and the error seems to go away. This is the error I'm getting:

  ERROR in ./src/renderer/main.js
  Module not found: Error: Can't resolve 'antd/lib' in '~/src/renderer'
   @ ./src/renderer/main.js 276:0-32
   @ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server ./node_modules/electron-webpack/vue-renderer-entry.js ./src/renderer/main.js

I'm not sure why suddenly it requires antd/lib module where it was working fine before. Things I've done to try to fix it:

  • Whitelisting element-ui:
  "electronWebpack": {
    "whiteListedModules": ["element-ui"],
 },

  • Referencing image as:
    => this doesn't load in dev build but does in production

Always looking for index.ts (or .js)

I've added electron-webpack to an existing project.
My main file is src/app.js, so I've setup my config like this:

"electronWebpack": {
    "commonSourceDirectory": "./resources",
    "title": true,
    "main": {
      "sourceDirectory": "src",
      "webpackConfig": "custom.webpack.additions.js"
    },
    "renderer": {
      "sourceDirectory": "resources"
    }
  }

In custom.webpack.additions.js I've setup a simple entry field:

module.exports = {
    entry: "/src/app.js"
};

While trying to pack: electron-webpack I get the following error:
Error: Cannot find entry file src\index.ts (or .js)

Why doesn't my config take the entry I've specified?
Thanks

Starting new app using Vue

I was just about to start building an electron app using Vue when I came across your post on electron-vue. What do you think, should I build upon electron-vue or are you close to a 1.0.0 release (assuming you adhere to semver) with this project?

Uncaught ReferenceError: vendor is not defined when using dll

As per your suggestion, I'm using dll to improve the build time but I get Uncaught ReferenceError: vendor is not defined error every time. With my experience with Laravel Mix I understand that I need to load the generated vendor.js file in dist/render-dll directoy but couldn't figure out how. I thought that this was automated and gets injected by electron-webpack.

I'm using electron-vue and my package.json looks something like this:

...
"files": [
      "dist/electron/**/*",
      "!node_modules/deep-diff/releases{,/**/*}",
      "!node_modules/bluebird/js/browser{,/**/*}",
      "!node_modules/source-map-support/**/*",
      "node_modules/source-map-support/source-map-support.js"
    ],
"electronWebpack": {
    "renderer": {
      "dll": [
        "vue",
        "vue-router",
        "vuex",
        "element-ui"
      ]
    }
  },
...

Thanks for your help.

Cannot yarn dev electron-webpack-quick-start

Fresh clone of electron-webpack. Should i be able to yarn dev this? I also get the same error on my existing app.

D:\projects\electron-webpack-quick-start>yarn
yarn install v0.24.5
[1/5] Resolving packages...
success Already up-to-date.
Done in 1.00s.

D:\projects\electron-webpack-quick-start>yarn dev
yarn dev v0.24.5
$ electron-webpack dev
┏ Renderer -------------------

CreateProcess failed with error 2: The system cannot find the file specified.

┗ ----------------------------
Error: Renderer WDS exited with code 0
at ChildProcessManager.child.on.code (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\ChildProce
ssManager.ts:60:32)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:194:7)
at maybeClose (internal/child_process.js:899:16)
at Socket. (internal/child_process.js:342:11)
at emitOne (events.js:96:13)
at Socket.emit (events.js:191:7)
at Pipe._handle.close [as _onclose] (net.js:511:12)
From previous event:
at D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\WebpackDevServerManager.ts:47:10
at Generator.next ()
at D:\projects\electron-webpack-quick-start\node_modules\graceful-fs\polyfills.js:287:18
at FSReqWrap.oncomplete (fs.js:114:15)
From previous event:
at startRenderer (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\out\dev\WebpackDevServerManager.js:72:
21)
at D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\dev-runner.ts:37:7
at Generator.next ()
From previous event:
at DevRunner.start (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\out\dev\dev-runner.js:122:11)
at D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\dev-runner.ts:131:19
at Generator.next ()
From previous event:
at main (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\out\dev\dev-runner.js:42:22)
at Object. (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\dev\dev-runner.ts:134:1)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at runInDevMode (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\cli.ts:36:2)
at Object.__dirname.default.command.command.command.command.command.argv [as handler] (D:\projects\electron-webpack-quick-start
\node_modules\electron-webpack\src\cli.ts:16:16)
at Object.runCommand (D:\projects\electron-webpack-quick-start\node_modules\yargs\lib\command.js:226:22)
at Object.parseArgs [as _parseArgs] (D:\projects\electron-webpack-quick-start\node_modules\yargs\yargs.js:970:30)
at Object.get [as argv] (D:\projects\electron-webpack-quick-start\node_modules\yargs\yargs.js:912:21)
at Object. (D:\projects\electron-webpack-quick-start\node_modules\electron-webpack\src\cli.ts:16:16)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
┏ Main -----------------------

Hash: 5905c4b8b84576d437f9
Version: webpack 3.6.0
Time: 773ms
Asset Size Chunks Chunk Names
main.js 37.3 kB 0 [emitted] main
[./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js] ./node_modules/electron-webpack/out/electron-main-hmr/main-hm
r.js 559 bytes {0} [built]
[./src/main/index.js] ./src/main/index.js 1.22 kB {0} [built]
[electron] external "electron" 42 bytes {0} [not cacheable]
[electron-webpack/out/electron-main-hmr/HmrClient] external "electron-webpack/out/electron-main-hmr/HmrClient" 42 bytes {0} [not
cacheable]
[source-map-support/source-map-support.js] external "source-map-support/source-map-support.js" 42 bytes {0} [not cacheable]
[0] multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/main/index.js 40 bytes {0} [built]

┗ ----------------------------

Hot reload stopped working

Hi,

Hot reload suddenly stopped working for me and I have no clue why. As things stand, one clue I got seems to be the my if (module.hot) check doesn't run when I make changes. On the console is just say App hot update.... & App updated. Recompiling... but my react-hot-loader doesn't run as module.hot doesn't seem to be working. Any ideas?

My index.js file:

import { AppContainer } from 'react-hot-loader'
import React from 'react'
import { render } from 'react-dom'
import { Provider as ReduxProvider } from 'react-redux'
import Router from 'react-router-redux/ConnectedRouter'
import { replayActionRenderer } from 'electron-redux'
import { Provider as RebassProvider } from 'rebass'
import 'typeface-roboto/index.css'
import 'mdi/scss/materialdesignicons.scss'
import './lib/icon.scss'

import history from './lib/history'
import store from './lib/store'
import App from './containers/App'

replayActionRenderer(store)

const renderApp = Component => render(
  <AppContainer>
    <ReduxProvider store={store}>
      <Router history={history}>
        <RebassProvider>
          <Component />
        </RebassProvider>
      </Router>
    </ReduxProvider>
  </AppContainer>,
  document.getElementById('app')
)

renderApp(App)

if (module.hot) module.hot.accept('./containers/App', () => renderApp(App))

Not allowed to load local resource error

I've read several cases of this error - none has helped to resolve the issue. In order to verify my code is not the cause I've done the following:

  1. I've created a new project of the official electron-quick-start (just forked it).
  2. I've added electron-builder and it works:
    https://github.com/YonatanKra/electron-quick-start/tree/building-app
  3. Then I've added electron-webpack and it doesn't work:
    https://github.com/YonatanKra/electron-quick-start/tree/adding-webpack

Is there anything I'm missing in order to make this work?

Using with electron-next

Hi,

I want to use electron next to compile the renderer. How would I use electron-webpack for compiling only the main process?

Thanks alot!

Feature Request: Support for element-ui "import on demand"

Since electron-webpack already supports iView "import on demand" feature, it would be nice to add support for element-ui as well. I understand that supporting every ui library out there is not feasible but I'm voting for element-ui to be supported because:

  1. element-ui seems to be more popular than iView (based on GitHub stars and forks)
  2. Having used both, element-ui has better looking components than iView (this is subjective of course but see my #1 point above)
  3. AFAIK, @develar has at least at one point used element-ui himself for his https://github.com/electron-userland/electrify project but then later switched to iView.

document is not defined in production

I am using react to build my application. I use document in src/renderer/index.js to create a node and render my app. I am also using react-hot-loader, which requires me to override the webpack entry point.

My webpack.renderer.additions.js file looks like this:

module.exports = {
  entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    './src/renderer/index.js'
  ],
  resolve: {
      extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        options: {
            presets: ['react']
        }
      }
    ]
  }
}

This works great in development, but it doesn't work in production. When I run my generated .app file, I get a "document is not defined" error. As soon as I remove the entry portion, everything works fine. I assume a different entry point needs to be set during production builds, but I haven't figured out what it is or how to do it.

Thanks in advance!

using electron-compile with different ui/pages based on cli args or remote urls

Im trying to build an app that does stuff on the computer.

The app can do multiple actions and has a CLI interface and remote url protocol (electron://).

also based on CLI command arguments or remote url i want to show different ui/page or not even an ui at all.

How would i go about this in electron-webpack? it seems like mi forced very much into 1 main entry point and one renderer entry point. is this correct? is there a way i could make my app work with this package?

Adding a new loader to webpack config

I'm trying to replace electron-compile that comes default with electron-vue with this package. I need to add a new loader. How does one add a new loader? My webpack fu is not that strong. Thanks for the package and your help.

Pass extended webpack.config.js to the CLI

This is a feature request I can look into it later to provide more details on how this could be done

There is an option to extend the webpack configuration but the payoff is to stop using the electron-webpack CLI which is less than desirable. We lose the automated start of the app, nice logging, etc.
It would be awesome if we had something like:

$ electron-webpack dev --config [ custom.renderer.webpack.config.js \ 
»                               , custom.dll.webpack.config.js]

or something similar.

Build error caused by dll in 1.5.0

I'm using the dll feature and when trying to upgrade to 1.5.0 the build fails.

The build log can be seen here and the electronWebpack configuration in package.json can be seen here.

Hot Module Replacement works only on port 9080

const mainWindow = new BrowserWindow();
let url = isDevelopment
    ? 'http://localhost:9080' // <-- Code won't work in case of value other than 9080
    : `file://${__dirname}/index.html`;
win.loadURL(url);

In case, if I specify port number other than 9080, HMR won't work and renderer process won't start, because port value 9080 hardcoded in 'packages/electron-webpack/src/targets/RendererTarget.ts'. No notification will appear, documentation doesn't contain anything about that:

configurator.config.devServer = {
        contentBase,
        port: 9080,
        hot: true,
        overlay: true,
      }

ts errors when run compile with env.production

node V7.10

package.json
  "dependencies": {
    "vue": "^2.4.1",
    "vue-electron": "^1.0.6",
    ...
  "devDependencies": {
    "typescript": "^2.4.1",
    "webpack": "^3.2.0",

tsconfig.json
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "module": "es2015",
    "allowJs": true,
    "target": "es5",
    "noImplicitAny": true,
    "removeComments": true,
    "moduleResolution": "node",
    "noResolve": true,
    "noEmitOnError": true,
    "inlineSources": true,
    "sourceMap": true,
    "noUnusedLocals": true,
    "skipLibCheck": true
  },
  "include": [
    "node_modules/@types/*/*.d.ts",
    "node_modules/electron/electron.d.ts",
    "typings/**/*.d.ts",
    "src/*.ts", 
    "src/*.vue"
  ],
  "exclude": []

yarn run compile

import Vue from 'vue'
import App from './App'
ERROR in ./src/renderer/index.ts
    (1,17): error TS2307: Cannot find module 'vue'.
    (2,17): error TS2307: Cannot find module './App'.

remove env.production then work
yarn run dev work

Modify index.html

index.html is generated when building the application, is there a way to modify the HTML? I seem to remember that there once was, but have forgotten how.

More specifically, I would like to set some styles on the body tag.

Loader Config for SASS

according to the documentation, using the sass-loader should be enabled as an add-on (https://webpack.electron.build/add-ons#sassscss)

I found myself having to manually add the configuration for handling sass-files in EVERY component, which then looks like this:

import { text } from '!style-loader!css-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]!sass-loader!./Home.scss';

using a predefined configuration, this should easily be configurable to only be import { text } from './Home.scss'; which is how I usually set it up in my webpack configuration. the documentation on the sass-loader unfortunately is really brief, and I couldnt find any documentation on the configuration of loaders and rules. Is there some more extended documentation on this topic or is this the intended usage? because having multiple lines like this and having to write the exact loader rules in every file seems a bit counter intuitive...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.