javascript - generar - minificar online
Excluir el módulo de la minificación de la carpeta web (2)
Creo que uglify-loader podría hacer el truco. Le proporciona más control sobre el resultado de la minificación que lo que obtiene de la caja.
Estamos usando WebPack en una aplicación de una sola página. La aplicación se implementa en muchos entornos. Tenemos un requisito en el que la aplicación necesita llamar a un punto final específico en un entorno determinado.
Para proporcionar la dirección de punto final para el entorno dado es tener un módulo de entornos. Esta es la solución actual (hay muchas y este no es el punto de la pregunta). Sin embargo, debemos excluir config.js de la minificación para que pueda sobrescribirse como parte del proceso de implementación.
El config.js tiene el siguiente aspecto:
module.exports = {
env: {
endpointUrl: ''http://1.2.3.4'',
authUrl: ''http://5.6.7.8''
}
};
Y se hace referencia a lo siguiente:
const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;
La configuración de WebPack tiene el siguiente aspecto:
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))
})
]
};
Hasta ahora hemos analizado externals cargadores externals y de módulos, pero no hemos encontrado nada que funcione. La exclusión en el cargador de módulos todavía causa que el módulo se minimice.
Algunas preguntas SO que hemos visto:
Los elementos externals Webpack son una buena opción para evitar agrupar ciertas dependencias.
Sin embargo, debemos excluir config.js de la minificación para que pueda sobrescribirse como parte del proceso de implementación.
Agregar una dependencia como externa no solo la excluye de la minificación, sino que ni siquiera la resuelve el paquete web.
webpack.config.js
var webpack = require(''webpack'');
module.exports = {
entry: {
index: ''./src/index.js''
},
output: {
path: ''./dist'',
filename: ''bundle.js''
},
externals: {
''./config'': ''config''
}
};
Agregue como externa la ruta utilizada para requerir su config.js . En mi ejemplo simple, la ruta corresponde a ./config . Asociarlo a la variable global que contendrá su objeto de configuración. En mi caso, acabo de usar config como el nombre de la variable (ver abajo config.js ).
index.js
const config = require(''./config'');
const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;
console.log(endpointUrl);
console.log(authUrl);
Como está evitando que el paquete web resuelva el módulo config.js , debe estar disponible en el entorno durante el tiempo de ejecución. Una forma podría ser exponerlo como una variable de config en el contexto global.
config.js
window.config = {
env: {
endpointUrl: ''http://1.2.3.4'',
authUrl: ''http://5.6.7.8''
}
};
Luego puede cargar un archivo config.js específico para cualquier entorno dado.
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>