Exclure le module de la minification de webpack
nous utilisons WebPack dans une application d'une seule page. L'application est déployée dans de nombreux environnements. Nous avons une condition où l'application doit appeler un point de terminaison dans un environnement donné.
afin de fournir l'adresse du point final pour l'environnement donné est d'avoir un module environnements. C'est la solution actuelle (il y en a beaucoup et ce n'est pas le point de la question). Cependant, nous devons exclure la config.js de minification so que peut être remplacée dans le cadre du processus de déploiement.
La config.js ressemble à ce qui suit:
module.exports = {
env: {
endpointUrl: 'http://1.2.3.4',
authUrl: 'http://5.6.7.8'
}
};
et est référencé comme suit:
const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;
la configuration WebPack ressemble à la suivante:
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 regardé alias et "1519160920 module" chargeurs mais n'ai rien trouvé qui fonctionne. Le exclure dans le chargeur de module provoque toujours le module à être minimisé.
quelques-unes des questions que nous avons examinées:
2 réponses
Webpack alias sont une bonne option pour éviter le faisceau de certaines dépendances.
Cependant nous devons exclure la config.js de minification pour qu'il peut être écrasée dans le cadre du processus de déploiement.
L'ajout d'une dépendance externe l'exclut non seulement de la minification mais n'est même pas résolu 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'
}
};
ajouter 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 la variable (voir ci-dessous config.js ).
de l'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 webpack de résoudre le module config.js alors il doit être disponible dans l'environnement pendant l'exécution. Une façon pourrait être de l'exposer comme une variable config dans le contexte global.
config.js
window.config = {
env: {
endpointUrl: 'http://1.2.3.4',
authUrl: 'http://5.6.7.8'
}
};
alors vous pouvez charger un fichier config.js spécifique pour n'importe quel environnement donné.
de l'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>
je pense uglify-loader pourrait faire l'affaire. Il vous donne plus de contrôle sur le résultat de minification que ce que vous obtenez de la boîte.