Necesito crear 2 archivos diferentes JavaScript y CSS, uno minimizado y el otro no.

Quiero hacer los archivos no minimizados solo en Chrome, para los otros navegadores que quiero el código minimizado y compulgado regularmente.

He intentado con Preset-Env, cambiando el archivo .babelrc, incluso lo intenté con la lista de navegación.

Webpack.dev.js

const merge = require('webpack-merge');
const loaders = require('./webpack.loaders');
const plugins = require('./webpack.plugins');

const common = merge([{
    mode: 'development',
    entry: {
        main: [
            './src/main/resources/js/index.js'
        ],
        sitemap: [
            './src/main/resources/js/indexSiteMap.js'
        ],
        error: [
            './src/main/resources/js/error/error.js'
        ],
        icons: [
            './src/main/resources/js/fonts/google.js',
            './src/main/resources/js/fonts/features.font.js',
            './src/main/resources/js/fonts/generals.font.js'
        ]
    },
    output: {
        filename: '[name].js',
        chunkFilename: '[name].js'
    },
    devtool: 'source-map',
    optimization: {
        splitChunks: {
            cacheGroups: {
                libs: {
                    test: /node_modules/,
                    name: "libs",
                    chunks: "initial",
                    enforce: true
                }
            }
        }
    }
},
loaders.loadSass(),
loaders.loadHandlebars(),
loaders.loadReact(),
loaders.loadFileLoader(false),
loaders.loadFonts(false),
loaders.loadExpose(),
loaders.loadEslint(),
]);

module.exports = () => {
    return merge([
        common,
        plugins.clean(),
        plugins.extractCSS(false),
        plugins.copy()
    ]);
}

.babelrc

{
    "presets": ["@babel/env", "@babel/react"]
}

Obtengo dos archivos diferentes de JavaScript, el common.js y el moderno.js

Cargaré el archivo Moderno -No minimizado en Chrome, de lo contrario, usaré el archivo common.js

2
dancalderon 27 jun. 2019 a las 21:04

1 respuesta

La mejor respuesta

Necesitará 2 configuraciones de WebPack diferentes, pase los argumentos de la línea de comandos como los siguientes:

webpack --env.browser=chrome --open 'Google Chrome'

webpack --env.browser=other --open safari

Y mantenga 2 configuraciones de WebPack diferentes en webpack.chrome.js y webpack.other.js

Y pon esto en webpack.config.js

module.exports = env => require(`./webpack.${env}.js`);

También necesitará 2 servidores locales diferentes o configuraciones de WebPack-dev-Server que se ejecutan en diferentes puertos como la a continuación:

webpack.chrome.js

  mode: 'production',
  devServer: {
    compress: true,
    contentBase: path.join(__dirname, './dist'),
    port: 9000,
  },

webpack.other.js

  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, './dist'),
    port: 9001,
  },
0
Sreeram Padmanabhan 28 jun. 2019 a las 17:26