Ausschließen eines Moduls aus webpack Bündel

Question

ich die gleiche Funktionalität wie RequireJS möchten empty:http://requirejs.org/docs/optimization.html#empty

Meine Use-Case ist, dass ich jquery-migrate in Entwicklung sind, aber ich möchte das, wenn für die Produktion gebaut auszuschließen.

Verwenden IgnorePlugin macht es nur nicht enthalten, und wenn es in den Code, es wirft dann einen Fehler (Uncaught Error: Cannot find module "jquery-migrate").

Was ich gerne passieren würde ist, dass es nur undefined oder etwas Ähnliches zurückgibt (wie in RequireJS). Ich möchte den Import im Code nicht berühren und ihn nur so konfigurieren, dass er undefined zurückgibt.

EDIT: Mit NormalModuleReplacementPlugin funktioniert, wenn ich den Ersatz auf eine leere Datei zeigen. Aber dafür nur eine leere Datei zu haben, erscheint unnötig.

Answer 1

ich die Null-loader verwenden für Module Ausblendung. Der Noop-Loader kann für eine weniger umständliche if-else in der Konfig verwendet werden.

Versuchen:

rules: [{ 
    test: /jquery-migrate/, 
    use: IS_DEV ? 'null-loader' : 'noop-loader' 
}] 

Answer 2

können Sie versuchen, eine resolve.alias in webpack.config zu machen:

resolve: { 
    alias: { 
     "jquery-migrate": process.env.NODE_ENV === 'production' ? "empty-module": "jquery-migrate" 
    } 
} 

Answer 3

Verwenden Webpack der DefinePlugin in Kombination mit den normalen Produktions Plugins (Deduplizierung und verunstalten).

Dann in Ihrem Code können Sie schreiben:

if(DEBUG) { 
    var test = require('test'); 
    alert(test); 
} 

Und wenn es in der Produktion integriert ist, wird die DEBUG mit einer wörtlichen if(false) { ... } ersetzt werden, die durch die uglify Plugin vollständig entfernt werden, seine test wird so nur erforderlich in einem Debug-Build.

Hier ist eine Beispielaufgabe Grunt Config für grunt-webpack die development und production Ziele für die Aufgabe hat:

 development: { 
      devtool: "sourcemap", 
      output: { 
       pathinfo: true, 
      }, 
      debug: true, 
      production: false, 
      plugins: [ 
       new webpack.DefinePlugin({ 
        DEBUG: true, 
        PRODUCTION: false 
       }) 
      ] 
     }, 

     production: { 
      plugins: [ 
       new webpack.DefinePlugin({ 
        DEBUG: false, 
        PRODUCTION: true 
       }), 
       new webpack.optimize.DedupePlugin(), 
       new webpack.optimize.UglifyJsPlugin({ 
        output: { 
         comments: false, 
        } 
       }) 
      ] 
     },