Construction conditionnelle basée sur l'environnement à l'aide de Webpack

Pas pourquoi la "webpack.DefinePlugin" la réponse est le haut d'un peu partout pour la définition de l'Environnement basé sur les importations/exige.

La problème avec cette approche est que vous êtes toujours à la prestation de tous les modules pour le client -> vérifiez auprès de webpack-bundle-analyezer par exemple. Et de ne pas réduire votre bundle.js's taille à tous 🙂

Donc ce qui fonctionne vraiment bien et beaucoup plus logique est: NormalModuleReplacementPlugin

Donc, plutôt que de faire un on_client conditionnelle nécessite -> juste ne comprennent pas les fichiers nécessaires pour le bundle, en premier lieu,

Espère que ça aide

J'ai fini par utiliser quelque chose de similaire à Matt Derrick Réponse, mais était inquiet à propos de deux points:

1. La config complète est injecté à chaque fois que je l'utilise ENV (ce Qui est mauvais pour les grosses configs).
2. J'ai pour définir de multiples points d'entrée parce que require(env) les différents fichiers.

---

Ce que j'ai trouvé est un simple compositeur qui construit un objet de config et l'injecte à une config du module.

Voici la structure du fichier, Iam, en utilisant pour cela:

config/
 └── main.js
 └── dev.js
 └── production.js
src/
 └── app.js
 └── config.js
 └── ...
webpack.config.js

La main.js détient toutes les config par défaut trucs:

//main.js
const mainConfig = {
  apiEndPoint: 'https://api.example.com',
  ...
}

module.exports = mainConfig;

La dev.js et production.js seulement tenir config trucs qui remplace la configuration principal:

//dev.js
const devConfig = {
  apiEndPoint: 'http://localhost:4000'
}

module.exports = devConfig;

L'important est le webpack.config.js qui compose la config et utilise le DefinePlugin pour générer une variable d'environnement __APP_CONFIG__ qui détient les composés objet de config:

const argv = require('yargs').argv;
const _ = require('lodash');
const webpack = require('webpack');

//Import all app configs
const appConfig = require('./config/main');
const appConfigDev = require('./config/dev');
const appConfigProduction = require('./config/production');

const ENV = argv.env || 'dev';

function composeConfig(env) {
  if (env === 'dev') {
    return _.merge({}, appConfig, appConfigDev);
  }

  if (env === 'production') {
    return _.merge({}, appConfig, appConfigProduction);
  }
}

//Webpack config object
module.exports = {
  entry: './src/app.js',
  ...
  plugins: [
    new webpack.DefinePlugin({
      __APP_CONFIG__: JSON.stringify(composeConfig(ENV))
    })
  ]
};

La dernière étape est maintenant la config.js, il ressemble à ceci (à l'Aide es6 import export de syntaxe ici, car son sous webpack):

const config = __APP_CONFIG__;

export default config;

Dans votre app.js vous pouvez maintenant utiliser import config from './config'; pour obtenir l'objet de config.

Confrontés au même problème que l'OP et nécessaire, en raison de l'octroi de licences, de ne pas inclure certaines de code dans certaines versions, j'ai adopté le webpack-conditionnel-chargeur comme suit:

Dans ma commande build-je définir une variable d'environnement de manière appropriée pour mon build. Par exemple "démo" dans le paquet.json:

...
  "scripts": {
    ...
    "buildDemo": "./node_modules/.bin/webpack --config webpack.config/demo.js --env.demo --progress --colors",
...

La confusion de bits est absent de la documentation, j'ai lu, c'est que je dois le rendre visible tout au long de la construire de traitement en s'assurant de mon env variable est injecté dans le processus global donc dans mon webpack.config/demo.js:

/* The demo includes project/reports action to access placeholder graphs.
This is achieved by using the webpack-conditional-loader process.env.demo === true
 */

const config = require('./production.js');
config.optimization = {...(config.optimization || {}), minimize: false};

module.exports = env => {
  process.env = {...(process.env || {}), ...env};
  return config};

Dans ce lieu, je peux conditionnellement rien exclure, en s'assurant que tout le code est bien secoué sur le résultant JavaScript. Par exemple, dans mes routes.js le contenu de démonstration est gardé à l'extérieur d'autres constructions ainsi:

...
//#if process.env.demo
import Reports from 'components/model/project/reports';
//#endif
...
const routeMap = [
  ...
  //#if process.env.demo
  {path: "/project/reports/:id", component: Reports},
  //#endif
...

Cela fonctionne avec webpack 4.29.6.

Utilisation envirnment variables pour créer de dev et de prod déploiements:

https://webpack.js.org/guides/environment-variables/