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

【问题标题】：How to detect which compiling option are used on recompilation by webpack如何检测 webpack 在重新编译时使用了哪个编译选项
【发布时间】：2020-01-22 16:52:08
【问题描述】：

我有以下脚本

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 配置（一个用于 main，另一个用于电子应用程序的渲染器脚本）。

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

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

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

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

任何提示将不胜感激。

【问题讨论】：

我不久前应用了一个解决方案，但结果证明它破坏了 HMR 功能。

标签： node.js webpack electron

【解决方案1】：

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

const webpackDevServer = require('webpack-dev-server')

const webpack = require('webpack')

const electroner = require('electroner')

const path = require('path')

const packageJson = require('./package')

const config = require('./webpack.config')

let window

let server

const options = {
  contentBase: './dist',
  hot: true,
  host: 'localhost',
  after: function (app, server) {
    window = electroner(path.resolve(__dirname, packageJson.main), {
      'enable-transparent-visuals': true,
      'disable-cpu': true
    })

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

let done = false

function initCompiler () {
  done = false

  webpackDevServer.addDevServerEntrypoints(config, options)

  const compiler = webpack(config, (error, stats) => {
    if (error) {
      console.error(error.stack || error)
      if (error.details) {
        console.error(error.details)
      }
      return
    }

    const info = stats.toJson()

    if (stats.hasErrors()) {
      console.error(info.errors)
    }

    if (stats.hasWarnings()) {
      console.warn(info.warnings)
    }

    done = true
  })

  let check

  let start = () => {
    if (!done) {
      check = setTimeout(start, 100)
      return
    }

    server = new webpackDevServer(compiler, options)

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

  setTimeout(start, 100)

  let files = []

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

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

    if (files.length && files.filter(file => file.indexOf(search) > -1).length) {
      files = []

      window.kill()

      server.close()

      initCompiler()
    }
  })
}

initCompiler()

编辑

我之前的回答有一些问题。在编译时，如果 main.js 文件不存在，它会出错并停止编译而不启动应用程序。

编辑确保在启动服务器之前首先完成编译，然后启动电子应用程序。

【讨论】：