Question

我有以下脚本

const WebpackDevServer = require('webpack-dev-server')
const webpack = require('webpack')
const electroner = require('electroner')
const packageJson = require('../package')

const config = require('./webpack.config')
const options = {
  port: 3000,
  contentBase: './dist',
  hot: true,
  overlay: true,
  after: function (app, server) {
    const window = electroner(`${__dirname}/../${packageJson.main}`, {
      'enable-transparent-visuals': true,
      'disable-cpu': true
    })

    window.on('close', () => {
      server.close()
    })
  },
  stats: 'errors-only'
}

WebpackDevServer.addDevServerEntrypoints(config, options)
const compiler = webpack(config)

const server = new WebpackDevServer(compiler, options)

server.listen(3000, 'localhost', () => {
  console.log('dev server listening on port 3000')
})

“ config”变量包含/指向两个webpack配置（一个用于电子应用程序的主包，另一个用于电子应用程序的渲染器脚本）。

我想实现的是，我只想在重新编译主脚本成功后才重新启动电子程序。

我已经阅读了一个有关钩子的一周，但我相信它们对实现上述目标没有帮助。

我正在寻找这样的解决方案：

compiler.on('compile', (stats) => {
  if(stats.details === 'main.js'){
     // logic to restart electron process here.
  }
})

任何提示将不胜感激。

Answer 1

通过以下方式实现了我一直在寻找的行为

const WebpackDevServer = require('webpack-dev-server')
const webpack = require('webpack')
const electroner = require('electroner')
const packageJson = require('../package')
const path = require('path')
const config = require('./webpack.config')

let window
let server

const options = {
  port: 3000,
  contentBase: './dist',
  hot: true,
  overlay: true,
  after: function (app, server) {
    window = electroner(`${__dirname}/../${packageJson.main}`, {
      'enable-transparent-visuals': true,
      'disable-cpu': true
    })

    window.on('close', () => {
      server.close()
    })
  },
  stats: 'errors-only',
  writeToDisk: true
}

const initCompiler = () => {
  WebpackDevServer.addDevServerEntrypoints(config, options)

  const compiler = webpack(config)

  server = new WebpackDevServer(compiler, options)

  server.listen(3000, 'localhost', () => {
    console.log('dev server listening on port 3000')
  })

  let files = []

  compiler.hooks.watchRun.tap('MainProcess', compiler => {
    files = Object.keys(compiler.watchFileSystem.watcher.mtimes).map(file => {
      return path.parse(file).dir
    })

    console.log(files)
  })

  compiler.hooks.done.tap('MainProcess', () => {
    const search = path.resolve(__dirname, '..', 'src', 'main')

    console.log('searching', files, search)

    if (files.length && files.indexOf(search) > -1) {
      console.log('Restarting')

      files = []

      window.kill()

      server.close()

      initCompiler()
    }
  })
}

initCompiler()

如何检测webpack在重新编译时使用了哪个编译选项

1 个答案: