Updated: electron version->4 & webpack version -> 4

.electron-vue/build.js

@@ -72,6 +72,7 @@ function build () {
 
 function pack (config) {
   return new Promise((resolve, reject) => {
+    config.mode = 'production'
     webpack(config, (err, stats) => {
       if (err) reject(err.stack || err)
       else if (stats.hasErrors()) {
@@ -99,6 +100,7 @@ function pack (config) {
 
 function web () {
   del.sync(['dist/web/*', '!.gitkeep'])
+  webConfig.mode = 'production'
   webpack(webConfig, (err, stats) => {
     if (err || stats.hasErrors()) console.log(err)
 

.electron-vue/dev-runner.js

@@ -41,21 +41,21 @@ function logStats (proc, data) {
 function startRenderer () {
   return new Promise((resolve, reject) => {
     rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
-
+    rendererConfig.mode = 'development'
     const compiler = webpack(rendererConfig)
     hotMiddleware = webpackHotMiddleware(compiler, {
       log: false,
       heartbeat: 2500
     })
 
-    compiler.plugin('compilation', compilation => {
+    compiler.hooks.compilation.tap('compilation', compilation => {
-      compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => {
+      compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
         hotMiddleware.publish({ action: 'reload' })
         cb()
       })
     })
 
-    compiler.plugin('done', stats => {
+    compiler.hooks.done.tap('done', stats => {
       logStats('Renderer', stats)
     })
 
@@ -80,10 +80,10 @@ function startRenderer () {
 function startMain () {
   return new Promise((resolve, reject) => {
     mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)
-
+    mainConfig.mode = 'development'
     const compiler = webpack(mainConfig)
 
-    compiler.plugin('watch-run', (compilation, done) => {
+    compiler.hooks.watchRun.tapAsync('watch-run', (compilation, done) => {
       logStats('Main', chalk.white.bold('compiling...'))
       hotMiddleware.publish({ action: 'compiling' })
       done()
@@ -114,7 +114,19 @@ function startMain () {
 }
 
 function startElectron () {
-  electronProcess = spawn(electron, ['--inspect=5858', path.join(__dirname, '../dist/electron/main.js')])
+  var args = [
+    '--inspect=5858',
+    path.join(__dirname, '../dist/electron/main.js')
+  ]
+
+  // detect yarn or npm and process commandline args accordingly
+  if (process.env.npm_execpath.endsWith('yarn.js')) {
+    args = args.concat(process.argv.slice(3))
+  } else if (process.env.npm_execpath.endsWith('npm-cli.js')) {
+    args = args.concat(process.argv.slice(2))
+  }
+
+  electronProcess = spawn(electron, args)
   
   electronProcess.stdout.on('data', data => {
     electronLog(data, 'blue')

.electron-vue/webpack.main.config.js

@@ -6,14 +6,14 @@ const path = require('path')
 const { dependencies } = require('../package.json')
 const webpack = require('webpack')
 
-const babelMinifyWebpackPlugin = require('babel-minify-webpack-plugin')
+const BabiliWebpackPlugin = require('babili-webpack-plugin')
 
 let mainConfig = {
   entry: {
     main: path.join(__dirname, '../src/main/index.js')
   },
   externals: [
-    // ...Object.keys(dependencies || {})
+    ...Object.keys(dependencies || {})
   ],
   module: {
     rules: [
@@ -73,7 +73,7 @@ if (process.env.NODE_ENV !== 'production') {
  */
 if (process.env.NODE_ENV === 'production') {
   mainConfig.plugins.push(
-    new babelMinifyWebpackPlugin(),
+    new BabiliWebpackPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"'
     })

.electron-vue/webpack.renderer.config.js

@@ -8,8 +8,9 @@ const webpack = require('webpack')
 
 const BabiliWebpackPlugin = require('babili-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { VueLoaderPlugin } = require('vue-loader')
 
 /**
  * List of node_modules to include in webpack bundle
@@ -41,12 +42,21 @@ let rendererConfig = {
           }
         }
       },
+      {
+        test: /\.styl(us)?$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'stylus-loader'
+        ]
+      },
+      {
+        test: /\.less$/,
+        use: ['vue-style-loader', 'css-loader', 'less-loader']
+      },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
+        use: ['vue-style-loader', 'css-loader']
-          fallback: 'style-loader',
-          use: 'css-loader'
-        })
       },
       {
         test: /\.html$/,
@@ -69,7 +79,9 @@ let rendererConfig = {
             extractCSS: process.env.NODE_ENV === 'production',
             loaders: {
               sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
-              scss: 'vue-style-loader!css-loader!sass-loader'
+              scss: 'vue-style-loader!css-loader!sass-loader',
+              less: 'vue-style-loader!css-loader!less-loader',
+              stylus: 'vue-style-loader!css-loader!stylus-loader'
             }
           }
         }
@@ -109,7 +121,8 @@ let rendererConfig = {
     __filename: process.env.NODE_ENV !== 'production'
   },
   plugins: [
-    new ExtractTextPlugin('styles.css'),
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({filename: 'styles.css'}),
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: path.resolve(__dirname, '../src/index.ejs'),

.travis.yml

@@ -29,7 +29,7 @@ before_install:
 install:
 #- export DISPLAY=':99.0'
 #- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
-- nvm install 8.9
+- nvm install 10
 - curl -o- -L https://yarnpkg.com/install.sh | bash
 - source ~/.bashrc
 - npm install -g xvfb-maybe

package.json

@@ -111,22 +111,22 @@
     "css-loader": "^0.28.4",
     "del": "^3.0.0",
     "devtron": "^1.4.0",
-    "electron": "1.8.8",
+    "electron": "4.0.0",
     "electron-builder": "^19.19.1",
     "electron-debug": "^1.4.0",
     "electron-devtools-installer": "^2.2.0",
     "eslint": "^4.4.1",
     "eslint-config-standard": "^10.2.1",
     "eslint-friendly-formatter": "^3.0.0",
-    "eslint-loader": "^1.9.0",
+    "eslint-loader": "^2.1.1",
     "eslint-plugin-html": "^3.1.1",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-node": "^5.1.1",
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-standard": "^3.0.1",
     "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^0.11.2",
+    "file-loader": "^3.0.1",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.2.0",
     "inject-loader": "^3.0.0",
     "karma": "^1.3.0",
     "karma-chai": "^0.1.0",
@@ -136,6 +136,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.31",
     "karma-webpack": "^2.0.1",
+    "mini-css-extract-plugin": "0.4.0",
     "mocha": "^3.0.2",
     "multispinner": "^0.2.1",
     "node-loader": "^0.6.0",
@@ -143,17 +144,18 @@
     "pug-loader": "^2.3.0",
     "require-dir": "^0.3.0",
     "spectron": "^3.7.1",
-    "style-loader": "^0.18.2",
+    "style-loader": "^0.23.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
-    "url-loader": "^0.5.9",
+    "url-loader": "^1.1.2",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^13.0.5",
+    "vue-loader": "^15.4.2",
-    "vue-style-loader": "^3.0.1",
+    "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.4.2",
-    "webpack": "^3.5.2",
+    "webpack": "^4.15.1",
-    "webpack-dev-server": "^2.7.1",
+    "webpack-cli": "^3.0.8",
-    "webpack-hot-middleware": "^2.18.2",
+    "webpack-dev-server": "^3.1.4",
-    "webpack-merge": "^4.1.0"
+    "webpack-hot-middleware": "^2.22.2",
+    "webpack-merge": "^4.1.3"
   }
 }

src/main/index.dev.js

@@ -7,9 +7,6 @@
 
 /* eslint-disable */
 
-// Set environment for development
-process.env.NODE_ENV = 'development'
-
 // Install `electron-debug` with `devtron`
 require('electron-debug')({ showDevTools: false })
 
@@ -24,15 +21,4 @@ require('electron').app.on('ready', () => {
 })
 
 // Require `main` process to boot app
-if (process.env.DEBUG_ENV === 'debug') {
-  require('babel-core/register')({
-    'presets': [
-      ['env', {
-        'targets': {
-          'node': true
-        }
-      }]
-    ]
-  })
-}
 require('./index')

src/main/index.js

@@ -477,17 +477,17 @@ const shortKeyHash = {
   upload: uploadClipboardFiles
 }
 
-const isSecondInstance = app.makeSingleInstance(() => {
+const gotTheLock = app.requestSingleInstanceLock()
+
+if (!gotTheLock) {
+  app.quit()
+} else {
   if (settingWindow) {
     if (settingWindow.isMinimized()) {
       settingWindow.restore()
     }
     settingWindow.focus()
   }
-})
-
-if (isSecondInstance) {
-  app.quit()
 }
 
 if (process.platform === 'win32') {