Получить текущий `--mode` в webpack.config.js

Как я могу получить текущий --mode, указанный в package.json внутри webpack.config.js? (Например, для загрузки некоторых плагинов.)

package.json

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

Что я сделал в Webpack 3:

package.json

"scripts": {
    "build": "cross-env NODE_ENV=development webpack",
    "prod": "cross-env NODE_ENV=production webpack"
  },

Затем я смог получить среду в Webpack с помощью process.env.NODE_ENV.

Конечно, я могу передать NODE_ENV с --mode, но я предпочитаю избегать дублирования.


webpack node.js npm webpack-4
person xAoc    schedule 14.03.2018    source источник
comment
тот же вопрос, что и вы задали.   -  person Monochrome Yeh    schedule 15.03.2018

Ответы (4)


arrow_upward
63
arrow_downward

Вы хотите избежать дублирования параметров, передаваемых сценарию.

Когда вы экспортируете функцию, функция будет вызываться с двумя аргументами: среда в качестве первого параметра и карта параметров в качестве второго параметра.

package.json

"scripts": {
  "build-dev": "webpack --mode development",
  "build-prod": "webpack --mode production"
},

webpack.config.js

module.exports = (env, options) => {
    console.log(`This is the Webpack 4 'mode': ${options.mode}`);
    return {
        ...
    };
}

Вот результаты:

Для npm run build-dev:

> webpack --mode development

This is the Webpack 4 'mode': development
Hash: 554dd20dff08600ad09b
Version: webpack 4.1.1
Time: 42ms
Built at: 2018-3-14 11:27:35

Для npm run build-prod:

> webpack --mode production

This is the Webpack 4 'mode': production
Hash: 8cc6c4e6b736eaa4183e
Version: webpack 4.1.1
Time: 42ms
Built at: 2018-3-14 11:28:32
person Fernando Espinosa    schedule 14.03.2018
comment
Это работает, однако, когда мне приходится использовать import/resolver с eslint, похоже, он не принимает функцию. - person corvid; 19.04.2018
comment
для меня это сработало с помощью env.mode. первый параметр, а не второй. - person Vinicius Rocha; 04.08.2018
comment
@corvid Пожалуйста, проверьте мой ответ, возможно, он поможет вам с преобразователем веб-пакетов. - person Daniel De León; 01.02.2019
comment
В официальной документации Webpack они используют argv.mode для получения фактического режима: webpack.js.org/concepts/mode< /а> - person Puka; 11.02.2019
comment
Я проголосовал за ваш ответ, потому что я устанавливал его равным mode=production вместо пробела .... спасибо - person Tarek; 21.02.2021

arrow_upward
5
arrow_downward

Чтобы проверить, находится ли он в рабочем режиме, внутри файла webpack.config.js я использую это:

const isProduction = process.argv[process.argv.indexOf('--mode') + 1] === 'production';

const config = {
    ...
};

if (isProduction) {
    config.plugins.push(new MiniCssExtractPlugin());
} else { // isDev
    config.devtool = /*'source-map'*/  'inline-source-map';
}

module.exports = config;

Перестаньте пробовать NODE_ENV, это старая школа ( webpack 3 ).

И это более совместимо для работы с import / webpack resolver

person Daniel De León    schedule 01.02.2019

arrow_upward
3
arrow_downward

Попробуй это

пакет.json

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production --env.production"
}

поэтому, если вы используете env внутри webpack config, это выглядит примерно так

module.exports = env => {
     const inProduction = env.production
     return  {
        entry: {...},
        output: {...},
        module: {...}
     }
}

дополнительные сведения о настройке webpack.config.js. (Переменные среды для webpack 4)

person Macuvex    schedule 14.03.2018

arrow_upward
0
arrow_downward

В итоге я (ab) использовал npm_lifecycle_script для установки режима в DefinePlugin:

MODE: JSON.stringify(process.env.npm_lifecycle_script.substr(process.env.npm_lifecycle_script.indexOf('--mode ') + '--mode '.length, process.env.npm_lifecycle_script.substr(process.env.npm_lifecycle_script.indexOf('--mode ') + '--mode '.length).search(/($|\s)/)))

При этом принимается значение параметра --mode из введенной команды webpack.

person BillyNate    schedule 20.08.2018