Блог

У меня есть репозиторий конфигурации Webpack, чтобы отделить application boilerplate его от Webpack configuration . Это приложение зависит от репозитория, в котором находится конфигурация Webpack. Я создал двоичный файл в репозитории Webpack, чтобы в приложении я мог скомпилировать и запустить эту конфигурацию в разработке. Конфигурация сочетает в себе общую конфигурацию с прошлой средой.

Проблема: сценарий прекрасен, но он не работает в части компиляции и обслуживания приложения. По-видимому, моя конфигурация в порядке — я изолирую их и тестирую отдельно. И я также следую документации v4 для NODE-API.

Поскольку мне некуда обратиться, извините, если я не на той платформе, я изучаю, как компилировать разные конфигурации одного и того же приложения (шаблонного) с помощью webpack.

Ссылка на код.

я ценю некоторые примеры репозитория…

Я столкнулся с несколькими проблемами, указывающими на библиотеки пакетов Webpack и Webpack-dev-server. Однако сегодня я получил то, что хотел. Я поделюсь здесь для дальнейшего использования другими пользователями.

Моей целью было иметь возможность запускать среду разработки или производства из сценария узла. Включает в себя создание нескольких интерфейсных приложений, которые были абстрагированы 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 amp;amp; 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;
}