Bedingter Build basierend auf der Umgebung mit Webpack

Ich habe einige Dinge für die Entwicklung – zB Mocks, mit denen ich meine verteilte Build-Datei nicht aufblähen möchte.

In RequireJS können Sie eine Konfiguration in einer Plugin-Datei übergeben und darauf basierend Dinge bedingt anfordern.

Für Webpack scheint es keine Möglichkeit zu geben, dies zu tun. Erstens, um eine Laufzeitkonfiguration für eine von mir verwendete Umgebung zu erstellen auflösen.alias um eine Anforderung abhängig von der Umgebung neu auszurichten, z. B.:

// All settings.
var all = {
    fish: 'salmon'
};

// `envsettings` is an alias resolved at build time.
module.exports = Object.assign(all, require('envsettings'));

Dann kann ich beim Erstellen der Webpack-Konfiguration dynamisch zuweisen, welche Datei envsettings weist auf (z webpackConfig.resolve.alias.envsettings="./" + env).

Allerdings würde ich gerne sowas machen:

if (settings.mock) {
    // Short-circuit ajax calls.
    // Require in all the mock modules.
}

Aber natürlich möchte ich diese Mock-Dateien nicht einbauen, wenn die Umgebung nicht Mock ist.

Ich könnte möglicherweise alle diese Anforderungen manuell mithilfe von resolve.alias erneut auf eine Stub-Datei verweisen – aber gibt es einen Weg, der sich weniger hacky anfühlt?

Irgendwelche Ideen, wie ich das machen kann? Vielen Dank.

Du kannst den … benutzen Plugin definieren.

Ich verwende es, indem ich etwas so Einfaches in Ihrer Webpack-Build-Datei wo mache env ist der Pfad zu einer Datei, die ein Objekt mit Einstellungen exportiert:

// Webpack build config
plugins: [
    new webpack.DefinePlugin({
        ENV: require(path.join(__dirname, './path-to-env-files/', env))
    })
]

// Settings file located at `path-to-env-files/dev.js`
module.exports = { debug: true };

und dann das in deinem Code

if (ENV.debug) {
    console.log('Yo!');
}

Dieser Code wird aus Ihrer Build-Datei entfernt, wenn die Bedingung falsch ist. Sie können eine Arbeit sehen Webpack-Build-Beispiel hier.

Ich bin mir nicht sicher, warum die Antwort “webpack.DefinePlugin” überall die beste ist, um umgebungsbasierte Importe/Anforderungen zu definieren.

Das Problem Bei diesem Ansatz liefern Sie immer noch alle diese Module an den Client -> prüfen Sie mit webpack-bundle-analyezer zum Beispiel. Und die Größe Ihrer bundle.js überhaupt nicht reduzieren 🙂

Was also wirklich gut funktioniert und viel logischer ist, ist: NormalModuleReplacementPlugin

Anstatt also eine on_client-bedingte Anforderung auszuführen -> nehmen Sie nicht benötigte Dateien überhaupt nicht in das Bundle auf

Ich hoffe, das hilft

Verwenden ifdef-loader. In Ihren Quelldateien können Sie Dinge tun wie

/// #if ENV === 'production'
console.log('production!');
/// #endif

Das relevante webpack Konfiguration ist

const preprocessor = {
  ENV: process.env.NODE_ENV || 'development',
};

const ifdef_query = require('querystring').encode({ json: JSON.stringify(preprocessor) });

const config = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: `ifdef-loader?${ifdef_query}`,
        },
      },
    ],
  },
  // ...
};

Am Ende habe ich etwas Ähnliches wie Matt Derrick’ Answer verwendet, war aber besorgt über zwei Punkte:

1. Die komplette Config wird bei jeder Nutzung injiziert ENV (Was für große Konfigurationen schlecht ist).
2. Ich muss mehrere Einstiegspunkte definieren, weil require(env) zeigt auf verschiedene Dateien.

Was ich mir ausgedacht habe, ist ein einfacher Composer, der ein Konfigurationsobjekt erstellt und es in ein Konfigurationsmodul einfügt.
Hier ist die Dateistruktur, die ich dafür verwende:

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

Das main.js enthält alle Standardkonfigurationen:

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

module.exports = mainConfig;

Das dev.js und production.js enthält nur Konfigurationsmaterial, das die Hauptkonfiguration überschreibt:

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

module.exports = devConfig;

Der wichtige Teil ist die webpack.config.js die die Konfiguration erstellt und die verwendet Plugin definieren um eine Umgebungsvariable zu generieren __APP_CONFIG__ das das zusammengesetzte Konfigurationsobjekt enthält:

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))
    })
  ]
};

Der letzte Schritt ist nun der config.jssieht es so aus (unter Verwendung der es6-Import-Export-Syntax hier, weil es sich unter Webpack befindet):

const config = __APP_CONFIG__;

export default config;

In deiner app.js könntest du jetzt verwenden import config from './config'; um das Konfigurationsobjekt zu erhalten.

Eine andere Möglichkeit ist die Verwendung einer JS-Datei als proxyund lassen Sie diese Datei das gewünschte Modul laden commonjsund exportieren Sie es als es2015 moduleso was:

// file: myModule.dev.js
module.exports = "this is in dev"

// file: myModule.prod.js
module.exports = "this is in prod"

// file: myModule.js
let loadedModule
if(WEBPACK_IS_DEVELOPMENT){
    loadedModule = require('./myModule.dev.js')
}else{
    loadedModule = require('./myModule.prod.js')
}

export const myString = loadedModule

Dann können Sie das ES2015-Modul normal in Ihrer App verwenden:

// myApp.js
import { myString } from './store/myModule.js'
myString // <- "this is in dev"

Konfrontiert mit dem gleichen Problem wie das OP und aufgrund der Lizenzierung verpflichtet, bestimmten Code in bestimmten Builds nicht aufzunehmen, habe ich das übernommen webpack-conditional-loader folgendermaßen:

In meinem Build-Befehl setze ich eine Umgebungsvariable passend für meinen Build. Zum Beispiel „demo“ in package.json:

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

Das verwirrende Bit, das in der Dokumentation, die ich gelesen habe, fehlt, ist das Ich muss dies während der gesamten Build-Verarbeitung sichtbar machen indem ich sicherstelle, dass meine env-Variable in den Prozess global eingefügt wird, also in meine 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};

Damit kann ich alles bedingt ausschließen und sicherstellen, dass der zugehörige Code ordnungsgemäß aus dem resultierenden JavaScript ausgeschüttelt wird. Zum Beispiel wird in my routes.js der Demo-Inhalt so von anderen Builds ferngehalten:

... // #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
...

This works with webpack 4.29.6.

I’ve struggled with setting env in my webpack configs. What I usually want is to set env so that it can be reached inside webpack.config.js, postcss.config.js and inside the entry point application itself (index.js usually). I hope that my findings can help someone.

The solution that I’ve come up with is to pass in --env production or --env development, and then set mode inside webpack.config.js.
However, that doesn’t help me with making env accessible where I want it (see above), so I also need to set process.env.NODE_ENV explicitly, as recommended here.
Most relevant part that I have in webpack.config.js follow below.

...
module.exports = mode => {
  process.env.NODE_ENV = mode;

  if (mode === "production") {
    return merge(commonConfig, productionConfig, { mode });
  }
  return merge(commonConfig, developmentConfig, { mode });
};