web-dev-qa-db-fra.com

Exclure le module de la minification du webpack

Nous utilisons WebPack dans une application d'une seule page. L'application est déployée dans de nombreux environnements. Nous avons une exigence où l'application doit appeler un point de terminaison spécifique dans un environnement donné.

Afin de fournir l'adresse de point de terminaison pour l'environnement donné, il faut disposer d'un module d'environnements. C'est la solution actuelle (il y en a beaucoup et ce n'est pas le but de la question). Cependant, nous devons exclure le fichier config.js de la minification afin qu'il puisse être remplacé dans le cadre du processus de déploiement.

Le config.js ressemble à ceci:

module.exports = {
    env: {
        endpointUrl: 'http://1.2.3.4',
        authUrl: 'http://5.6.7.8'
    }
};

Et est référencé à l'aide des éléments suivants:

const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;

La configuration WebPack ressemble à ceci:

var webpack = require('webpack');
​
module.exports = {
    entry: {
        main: './src/js/main.jsx',
        login: './src/js/login-main.jsx'
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [{
            test: /.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            plugins: ['transform-react-jsx'],
            query: {stage: 0}
        }, {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'eslint-loader'
        }]
    },
    plugins: [
        new webpack.ProvidePlugin({
            fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        }),
        new webpack.DefinePlugin({
            __DEV__: JSON.stringify(JSON.parse(process.env.DEV || false))
        })
    ]
};

Jusqu'à présent, nous avons examiné externes et chargeurs de modules mais n'avons rien trouvé qui fonctionne. L'exclusion dans le chargeur de module entraîne toujours la minification du module.

Quelques SO questions que nous avons examinées:

javascriptwebpackbundling-and-minification
23
Bronumski

Webpack externals sont une bonne option pour éviter de regrouper certaines dépendances.

Cependant, nous devons exclure le fichier config.js de la minification afin qu'il puisse être remplacé dans le cadre du processus de déploiement.

L'ajout d'une dépendance comme externe l'exclut non seulement de la minification, mais elle n'est même pas résolue par webpack.

webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: {
    index: './src/index.js'
  },
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  externals: {
    './config': 'config'
  }
};

Ajoutez comme externe le chemin utilisé pour exiger votre config.js. Dans mon exemple simple, le chemin correspond à ./config. Associez-le à la variable globale qui contiendra votre objet de configuration. Dans mon cas, je viens d'utiliser config comme nom de variable (voir ci-dessous config.js).

index.js

const config = require('./config');

const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;

console.log(endpointUrl);
console.log(authUrl);

Comme vous empêchez le webpack de résoudre le config.js module alors il doit être disponible dans l'environnement pendant l'exécution. Une façon pourrait être de l'exposer en tant que variable config dans le contexte global.

config.js

window.config = {
  env: {
    endpointUrl: 'http://1.2.3.4',
    authUrl: 'http://5.6.7.8'
  }
};

Ensuite, vous pouvez charger un config.js fichier pour tout environnement donné.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Webpack</title>
</head>
<body>
  <script type="text/javascript" src="config.js"></script>
  <script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>
18
dreyescat

Je pense que glify-loader pourrait faire l'affaire. Il vous offre plus de contrôle sur le résultat de la minification que sur ce que vous sortez de la boîte.

5
Juho Vepsäläinen