web-dev-qa-db-ja.com

webpack configでモードを取得[webpack 4]

たとえば、いくつかのプラグインをプッシュするために、webpack configでモードを取得するにはどうすればよいですか？.

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"
  },

その後、process.env.NODE_ENVによってwebpackの環境を取得できました

もちろん、NODE_ENVを--modeで渡すことはできますが、重複を避けたいです。

node.jsnpmwebpackwebpack-4
15
xAoc

スクリプトで渡されるオプションの重複を避けたい。

関数をエクスポートすると、関数は2つの引数で呼び出されます。最初のパラメーターとしての環境および2番目のパラメーターとしてのオプションマップ

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
36
Fernando Espinosa

これを試して

package.json

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

webpack config内でenvを使用している場合、次のようになります

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

webpack.config.jsを設定するための詳細。 （ webpack 4の環境変数 ）

4
Macuvex

が本番モードかどうかをテストするには、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）。

そして、これはimport / webpack resolverで動作するためにより互換性があります

2
Daniel De León

npm_lifecycle_scriptを使用してDefinePluginのモードを設定（ab）しました：

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)/)))

これは、発行されたwebpackコマンドから--modeパラメーターの値を取得します。

0
BillyNate