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 bedingen, dass darauf basierend Dinge erforderlich sind.

Für Webpack scheint es keine Möglichkeit zu geben, dies zu tun. Erstens, um eine Laufzeitkonfiguration für eine Umgebung zu erstellen, habe ich resolve.alias verwendet , um eine Anforderung abhängig von der Umgebung neu zu vergeben, z.

// 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, auf welche Dateipunkte envsettings(dh webpackConfig.resolve.alias.envsettings = './' + env).

Ich möchte jedoch etwas tun wie:

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 erforderlichen Anforderungen mithilfe von resolve.alias erneut manuell in eine Stub-Datei umwandeln - aber gibt es einen Weg, der sich weniger hackig anfühlt?

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

Sie können das Define-Plugin verwenden .

Ich verwende es, indem ich etwas so Einfaches wie das in Ihrer Webpack-Build-Datei mache, wobei envder Pfad zu einer Datei ist, 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. Hier sehen Sie ein funktionierendes Webpack-Build-Beispiel .

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

Das Problem bei diesem Ansatz ist, dass Sie immer noch alle diese Module an den Client liefern -> überprüfen Sie dies beispielsweise mit dem Webpack-Bundle-Analyzer . Und die Größe von bundle.js überhaupt nicht reduzieren :)

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

Anstatt eine on_client-Bedingung zu erfüllen, müssen Sie nicht benötigte Dateien in das Bundle aufnehmen

hoffentlich hilft das

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

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

Die entsprechende webpackKonfiguration 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 Derricks Antwort verwendet , war aber über zwei Punkte besorgt:

1. Die komplette Konfiguration wird bei jeder Verwendung ENVeingefügt (was für große Konfigurationen schlecht ist).
2. Ich muss mehrere Einstiegspunkte definieren, da require(env)auf verschiedene Dateien verweisen.

Was ich mir ausgedacht habe, ist ein einfacher Komponist, der ein Konfigurationsobjekt erstellt und 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.jsenthält alle Standard-Konfigurationsmaterialien:

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

module.exports = mainConfig;

Das dev.jsund production.jseinzige Konfigurationsmaterial, das die Hauptkonfiguration überschreibt:

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

module.exports = devConfig;

Der wichtige Teil ist der, webpack.config.jsder die Konfiguration erstellt und mit dem DefinePlugin eine Umgebungsvariable generiert, __APP_CONFIG__die 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 jetzt der config.js, es sieht so aus (Verwenden der ES6-Import-Export-Syntax hier, da es sich unter dem Webpack befindet):

const config = __APP_CONFIG__;

export default config;

In Ihrem können app.jsSie jetzt import config from './config';das Konfigurationsobjekt abrufen.

Eine andere Möglichkeit besteht darin, eine JS-Datei als zu verwenden proxyund diese Datei das gewünschte Modul laden zu lassen commonjsund es wie folgt zu exportieren es2015 module:

// 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 normalerweise in Ihrer App verwenden:

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

Angesichts des gleichen Problems wie das OP und aufgrund der Lizenzierung, bestimmten Code nicht in bestimmte Builds aufzunehmen, habe ich den Webpack-Conditional-Loader wie folgt übernommen:

In meinem Build-Befehl habe ich eine Umgebungsvariable festgelegt, die für meinen Build geeignet ist. 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 von mir gelesenen Dokumentation fehlt, ist, dass ich dies während der gesamten Build-Verarbeitung sichtbar machen muss, indem ich sicherstelle, dass meine env-Variable in den globalen Prozess eingefügt wird, also in meiner 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};

Wenn dies vorhanden ist, kann ich alles bedingt ausschließen und sicherstellen, dass der zugehörige Code ordnungsgemäß aus dem resultierenden JavaScript herausgeschüttelt wird. Zum Beispiel wird in meiner route.js der Demo-Inhalt von anderen Builds ferngehalten, also:

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

Dies funktioniert mit Webpack 4.29.6.

Ich habe Probleme damit, env in meinen Webpack-Konfigurationen festzulegen. Was ich in der Regel will , ist Satz env , so dass es im Innern erreicht werden kann webpack.config.js, postcss.config.jsund in dem Einstiegspunkt Anwendung selbst ( index.jsin der Regel). Ich hoffe, dass meine Erkenntnisse jemandem helfen können.

Die Lösung, die ich mir ausgedacht habe, besteht darin, --env productionoder zu übergeben --env developmentund dann den Modus im Inneren einzustellen webpack.config.js. Dies hilft mir jedoch nicht dabei, envzugänglich zu machen, wo ich es möchte (siehe oben), daher muss ich auch process.env.NODE_ENVexplizit festlegen , wie hier empfohlen . Der relevanteste Teil, den ich im webpack.config.jsFolgenden habe, folgt.

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

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

Verwenden Sie Umgebungsvariablen, um Entwicklungs- und Produktbereitstellungen zu erstellen:

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

Dies ist zwar nicht die beste Lösung, kann jedoch für einige Ihrer Anforderungen geeignet sein. Wenn Sie unterschiedlichen Code in Knoten und Browser ausführen möchten, funktioniert dies für mich:

if (typeof window !== 'undefined') 
    return
}
//run node only code now