web-dev-qa-db-fra.com

Obtenir le mode dans la configuration webpack [webpack 4]

Comment puis-je obtenir le mode dans la configuration webpack, par exemple, pour pousser des plugins.

package.json

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

Ce que j'ai fait dans le Webpack 3

package.json

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

Ensuite, j'ai pu obtenir l'environnement dans le webpack par process.env.NODE_ENV 

Bien sûr, je peux passer NODE_ENV avec --mode mais je préfère éviter les doublons.

node.jsnpmwebpackwebpack-4
10
xAoc

Vous voulez éviter la duplication des options transmises au script.

Lorsque vous exportez une fonction, elle est appelée avec 2 arguments: un environnement en tant que premier paramètre et une mappe d'options en tant que second paramètre.

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 {
        ...
    };
}

Ce sont les résultats:

Pour 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

Pour 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
21
Fernando Espinosa

Essaye celui-là

package.json

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

donc si vous utilisez la env à l'intérieur de webpack config, cela ressemble à ceci 

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

plus de détails pour configurer votre webpack.config.js. ( Variables d'environnement pour webpack 4 )

1
Macuvex

J'ai fini par (ab) utiliser npm_lifecycle_script pour définir le mode dans la 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)/)))

Cela prend la valeur du paramètre --mode à partir de la commande webpack émise.

0
BillyNate

Pour tester si est en mode production, dans le fichier webpack.config.js, j'utilise ceci:

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;

Arrêtez d'essayer NODE_ENV, c'est vieille école ( webpack 3 ).

Et cela est plus compatible pour travailler avec import / webpack resolver

0
Daniel De León