Передача аргументов командной строки в webpack.config.js

webpack.config.js также может экспортировать функцию env, которая может возвращать объект conf. Поэтому вы можете иметь конфигурацию веб-пакета, например:

module.exports = env => {
    return {
        entry: env === "production" ? "./app.js": "app-dev.js",
        output: {
          filename: "bundle.js"
        },
    }
};

а затем вызовите webpack из командной строки (или package.json) следующим образом:

webpack --env=production

Вы можете указать пользовательские параметры для переменной env из командной строки, поэтому для этого примера вы можете вызвать:

webpack --env.entry='./app.js' --env.output='bundle.js'

и используйте их в своем веб-пакете, выполнив

module.exports = env => ({
  entry: env.entry,
  output: {
    filename: env.output
  },
});

Вы также можете передать несколько пар ключ-значение в свою конфигурацию, используя --env=key=value:

webpack --env=mode=production --env=branch=develop

или (для разработки с помощью webpack-dev-server):

webpack serve --env=mode=production --env=branch=develop

webpack.config.js будет выглядеть так:

module.exports = (env) => {
  const mode = env.mode === 'prod' ? 'dev';
  const branch = env.branch ? env.branch : 'develop';

  return {
    entry: mode === 'prod' ? './app.js': 'app-dev.js',
    output: {
      filename: 'bundle.js',
      path: 'dist/' + branch),
    },
  }
}

Все переданные таким образом значения доступны как объект в конфигурации, что упрощает их использование.

{ 
  WEBPACK_BUNDLE: true,
  mode: 'production',
  branch: 'feature-x',
  foo: 'bar'
}

Вы можете использовать пакет argv и установить переменные. Вы должны сделать это до module.export.

Вы можете использовать аргумент CLI --env для передачи произвольных параметров в конфигурацию.

Например, следующая команда:

webpack --env entry=./entry.js --env output=./output.js

Создаст следующий объект env:

{entry: './entry.js', output: './output.js'}

Который вы затем можете использовать в своей конфигурации следующим образом:

module.exports = env => ({
  entry: env.entry,
  output: {
    filename: env.output
  },
});

Подробнее читайте здесь: Webpack — переменные среды

На мой взгляд, самый простой способ передачи аргументов — использовать Node. Поскольку Webpack получает аргументы, вы можете сохранить аргументы командной строки в специальной переменной среды (которая существует только в рамках сеанса):

// webpack.config.js 
process.env.MY_APPLICATION_NAME_ARGS = JSON.stringify(process.argv)

export default {
...

Затем в main.js (в любом месте, где вы хотите их проанализировать) вы извлекаете аргументы командной строки из выделенной переменной среды.

// main.js
const myArgs = JSON.parse(env.MY_APPLICATION_NAME_ARGS )

Поскольку вы будете получать все аргументы, которые вы передали Webpack, используя это, вы сможете безболезненно использовать любые модули узла (например, yargs) для их анализа (или, конечно, делать это вручную).

Таким образом, вы сможете делать такие вещи без каких-либо проблем:

webpack ... --opt1 the_value --custom1 something

yarn run dev --opt1 the_value --custom1 something

и т. д.