web-dev-qa-db-fra.com

Exclure un module du paquet Webpack

J'aimerais les mêmes fonctionnalités que RequireJS empty:http://requirejs.org/docs/optimization.html#empty

Mon cas d'utilisation est d'inclure jquery-migrate dans le développement, mais je voudrais l'exclure lors de la création.

L'utilisation de IgnorePlugin le rend simplement non inclus et, lorsque require dans le code, il génère une erreur (Uncaught Error: Cannot find module "jquery-migrate").

Ce que j'aimerais, c’est qu’il retourne simplement undefined, ou quelque chose du genre (comme empty: dans RequireJS). Je voudrais ne pas toucher l’importation dans le code, il suffit de le configurer pour renvoyer undefined.

EDIT: Utiliser NormalModuleReplacementPlugin fonctionne si je pointe le remplacement vers un fichier vide. Mais garder un fichier vide juste pour cela semble inutile.

javascriptwebpack
13
SimenB

J'utilise le null-loader pour masquer des modules. Le noop-loader peut être utilisé pour un moins gênant si-sinon dans la config.

Essayer:

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

Vous pouvez essayer de faire un resolve.alias dans webpack.config:

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

Utilisez la variable DefinePlugin de Webpack en combinaison avec les plugins de production normaux (Dedupe et Uglify).

Ensuite, dans votre code, vous pouvez écrire:

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

Et lorsqu’elle est intégrée à la production, la DEBUG sera remplacée par une if(false) { ... } littérale qui sera complètement supprimée par le plug-in uglify, de sorte que test ne sera nécessaire que dans une version de débogage. 

Voici un exemple de configuration de tâche Grunt pour grunt-webpack qui a pour cibles development et production:

        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,
                    }
                })
            ]
        },
1
Jonathan Dumaine