Tengo algunas cosas para el desarrollo, por ejemplo, simulacros con los que no me gustaría inflar mi archivo de compilación distribuido.
En RequireJS puede pasar una configuración en un archivo de complemento y condicionalmente requerir cosas basadas en eso.
Para webpack no parece haber una forma de hacer esto. En primer lugar, para crear una configuración de tiempo de ejecución para un entorno, he usado resolve.alias para volver a señalar un requerimiento según el entorno, por ejemplo:
// All settings. var all = { fish: 'salmon' }; // `envsettings` is an alias resolved at build time. module.exports = Object.assign(all, require('envsettings')); Luego, al crear la configuración del paquete web, puedo asignar dinámicamente a qué archivo apunta envsettings (es decir webpackConfig.resolve.alias.envsettings = './' + env ).
Sin embargo, me gustaría hacer algo como:
if (settings.mock) { // Short-circuit ajax calls. // Require in all the mock modules. }Pero, obviamente, no quiero incorporar esos archivos simulados si el entorno no es simulado.
Posiblemente podría volver a señalar manualmente todos esos requisitos en un archivo de resguardo usando resolve.alias nuevamente, pero ¿hay alguna manera que se sienta menos incómoda?
¿Alguna idea de cómo puedo hacer eso? Gracias.
Puede usar el complemento de definición .
Lo uso haciendo algo tan simple como esto en el archivo de compilación de su paquete web, donde env es la ruta a un archivo que exporta un objeto de configuración:
// Webpack build config plugins: [ new webpack.DefinePlugin({ ENV: require(path.join(__dirname, './path-to-env-files/', env)) }) ] // Settings file located at `path-to-env-files/dev.js` module.exports = { debug: true };y luego esto en tu código
if (ENV.debug) { console.log('Yo!'); }Eliminará este código de su archivo de compilación si la condición es falsa. Puede ver un ejemplo de compilación de Webpack en funcionamiento aquí .
No estoy seguro de por qué la respuesta "webpack.DefinePlugin" es la mejor en todas partes para definir importaciones/requisitos basados en el entorno.
El problema con ese enfoque es que aún está entregando todos esos módulos al cliente -> verifique con webpack-bundle-analyezer, por ejemplo. Y no reducir el tamaño de tu bundle.js en absoluto :)
Entonces, lo que realmente funciona bien y mucho más lógico es: NormalModuleReplacementPlugin
Entonces, en lugar de hacer un requerimiento condicional on_client -> simplemente no incluya archivos no necesarios en el paquete en primer lugar
Espero que ayude
Usa ifdef-loader . En sus archivos fuente puede hacer cosas como
/// #if ENV === 'production' console.log('production!'); /// #endif La configuración relevante webpack es
const preprocessor = { ENV: process.env.NODE_ENV || 'development', }; const ifdef_query = require('querystring').encode({ json: JSON.stringify(preprocessor) }); const config = { // ... module: { rules: [ // ... { test: /\.js$/, exclude: /node_modules/, use: { loader: `ifdef-loader?${ifdef_query}`, }, }, ], }, // ... };