通过节点api^ 4.44.2进行webpack多重编译

如何解决通过节点api^ 4.44.2进行webpack多重编译

我有一个Webpack配置存储库，用于将application boilerplate与Webpack configuration分开。此应用程序取决于Webpack配置所在的存储库。我在Webpack存储库中创建了一个二进制文件，以便在应用程序中可以在开发中编译并运行此配置。该配置将常见配置与过去的环境结合在一起。

问题：场景很漂亮，但是在编译和服务应用程序部分没有用。显然我的配置还可以-我隔离它们并分别进行测试。而且我还在关注NODE-API的v4文档。

由于我无处可去，所以很抱歉，如果使用的平台不正确，我正在研究如何使用webpack编译同一应用程序（样板）的不同配置。

Link to the code.

我感谢一些回购示例...

解决方法

我遇到了一些问题，这些问题指向Webpack和Webpack-dev-server软件包的库。但是，今天我得到了想要的东西。我将在这里分享，以供其他用户将来参考。

我的目标是能够从节点脚本触发开发或生产环境。涉及构建多个FrontEnd应用程序，该应用程序在webpack.config中进行了抽象。

现在，我可以在外壳上运行mycli development了，这将触发该环境的配置构建。

// mycli.js
#!/usr/bin/env node

const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const webpackConfiguration = require('./webpack/webpack.config')
const args = (process.argv && process.argv.length > 2) ? process.argv.slice(2) : []
const mode = args.length > 0 ? args[0] : 'development'
const config = webpackConfiguration(mode)

/**
 * Minimum webpack configuration for cli validation.
 * @see {@link webpackConfiguration} to further information
 */
const minConfig = {
  entry: __dirname + '/test.js',mode,output: {
    path: '/dist',filename: 'bundle.js'
  }
}

/** @type {WebpackCompilerInstance} compiler */
const compiler = webpack(minConfig)
switch (config.mode) {
  case 'development':
    /**
     * Recommended by documentation:
     *    "If you're using dev-server through the Node.js API,*    the options in devServer will be ignored. Pass the options
     *    as a second parameter instead."
     * @see {@link https://v4.webpack.js.org/configuration/dev-server/#devserver} for further information.
     * @see {@link https://github.com/webpack/webpack-dev-server/tree/master/examples/api/simple} for example
     */
    const devServerConfig = config.devserver;
    if (config) delete config.devserver
    const devServerOptions = Object.assign({},devServerConfig,{
      open: true,stats: {
        colors: true,},})
    const devserverCallback = (err) => {
      if (err) throw err
      console.log('webpack-dev-server listening...')
    }
    new WebpackDevServer(compiler,devServerOptions).listen(devServerConfig.port,devServerConfig.host,devserverCallback)
    break;


  case 'production':
    const compilerCallback = (err,stats) => {
      console.log(stats,err)
      if (err) throw err
      process.stdout.write(`Stats: \n${stats} \n`)
      console.log('Compiler has finished execution.')
    }
    compiler.run(compilerCallback)
    break;

  default:
    console.error('No matching mode. Try "development" or "production".')
    break;
}