Aquí está mi webpack.config.js

var webpack = require("webpack");

module.exports = {

  entry: "./entry.js",
  devtool: "source-map",
  output: {
    path: "./dist",
    filename: "bundle.min.js"
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({minimize: true})
  ]
};

Estoy construyendo con

$ webpack

En mi dist carpeta, solo estoy consiguiendo

  • bundle.min.js
  • bundle.min.js.map

También me gustaría ver sin comprimir bundle.js

InformationsquelleAutor user633183 | 2014-09-21

14 Comentarios

  1. 137

    webpack.config.js:

    const webpack = require("webpack");
    
    module.exports = {
      entry: {
        "bundle": "./entry.js",
        "bundle.min": "./entry.js",
      },
      devtool: "source-map",
      output: {
        path: "./dist",
        filename: "[name].js"
      },
      plugins: [
        new webpack.optimize.UglifyJsPlugin({
          include: /\.min\.js$/,
          minimize: true
        })
      ]
    };

    Desde Webpack 4, webpack.optimize.UglifyJsPlugin ha sido obsoleto y su uso resulta en error:

    webpack.optimizar.UglifyJsPlugin ha sido eliminado, por favor, utilice config.la optimización.minimizar en lugar

    Como el manual explica, el plugin puede ser reemplazado con minimize opción. Configuración personalizada puede ser proporcionado para que el plugin especificando UglifyJsPlugin ejemplo:

    const webpack = require("webpack");
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    
    module.exports = {
      //...
      optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
          include: /\.min\.js$/
        })]
      }
    };

    Este hace el trabajo para una configuración simple. Una opción más eficaz es el uso de Trago junto con Webpack y hacer lo mismo en una sola pasada.

    • esto nunca va a funcionar, porque ni siquiera var webpack = require('webpack');ing.
    • No quiero ni mencionar que esto se hace en webpack.config.js pero esto se supone que una vez que estamos en Node.js la tierra y el uso Webpack.
    • Hmm, en webpack 4 que tengo: Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
    • He actualizado la respuesta. Espero que esto ayude.
    • Actualización: ahora usted puede utilizar el terser-webpack-plugin webpack.js.org/plugins/terser-webpack-plugin
  2. 155

    Puede utilizar un único archivo de configuración, e incluyen la UglifyJS plugin condicionalmente el uso de una variable de entorno:

    var webpack = require('webpack');
    
    var PROD = JSON.parse(process.env.PROD_ENV || '0');
    
    module.exports = {
    
      entry: './entry.js',
      devtool: 'source-map',
      output: {
        path: './dist',
        filename: PROD ? 'bundle.min.js' : 'bundle.js'
      },
      plugins: PROD ? [
        new webpack.optimize.UglifyJsPlugin({
          compress: { warnings: false }
        })
      ] : []
    };

    y, a continuación, acaba de establecer esta variable cuando se desea comprimir es:

    $ PROD_ENV=1 webpack


    Edición:

    Como se ha mencionado en los comentarios, NODE_ENV se utiliza generalmente (por convenio), para establecer si un determinado medio ambiente es una producción o un entorno de desarrollo. Para comprobarlo, también puede establecer var PROD = (process.env.NODE_ENV === 'production'), y continuar normalmente.

    • Nodo tiene un «default» para eso, se llama NODE_ENV.
    • No es la opción que se llama compress en lugar de minimize?
    • estás en lo correcto. actualizada la respuesta
    • Sólo una pequeña advertencia: cuando se llama a webpack con argumentos, como webpack -p la configuración de webpack.optimizar.UglifyJsPlugin en su webpack config será (al menos parcialmente) ignorado (al menos la configuración de mangle: false es ignorado).
    • Aviso que esto genera un solo archivo a la vez. Así que para hacer este trabajo para la pregunta debe haber varios Webpack pasa, webpack && webpack -p.
    • ¿Cuál es la razón detrás de la escritura new webpack.optimize.UglifyJsPlugin() en lugar de sólo new UglifyJsPlugin()? UglifyJS se minify código, y lo hace webpack.optimizar yo creía..
    • es allí una manera de generar dos archivos con un solo webpack comando?
    • Para alguien que esta leyendo esto, me gustaría sugerir el uso de definePlugin en su lugar, que creo que es instalado por defecto con Webpack.

  3. 54

    Puede ejecutar webpack dos veces con distintos argumentos:

    $ webpack --minimize

    a continuación, compruebe argumentos de línea de comandos en webpack.config.js:

    var path = require('path'),
      webpack = require('webpack'),
      minimize = process.argv.indexOf('--minimize') !== -1,
      plugins = [];
    
    if (minimize) {
      plugins.push(new webpack.optimize.UglifyJsPlugin());
    }
    
    ...

    ejemplo webpack.config.js

    • Parece muy simple solución para mí; sólo que como de webpack v3.5.5 se ha incorporado en el interruptor de la llama-optimizar-minimizar o -p.
    • La idea es genial, pero no trabajo ahora, webpack le grita «Desconocida argumento: reducir al mínimo la» Solución: utilice –env.minimizar más detalles en el siguiente enlace github.com/webpack/webpack/issues/2254
    • Puede utilizar más estándar manera de pasar el medio ambiente indicación en webpack: stackoverflow.com/questions/44113359/…
  4. 40

    Para agregar otra pregunta, la bandera -p (corto para --optimize-minimize) permitirá que el UglifyJS con argumentos predeterminados.

    Usted no va a obtener un record de crudo y paquete de una sola carrera o generar nombran de manera diferente paquetes para el -p bandera no puede cumplir su caso de uso.

    Por el contrario la -d opción es corto para --debug --devtool sourcemap --output-pathinfo

    Mi webpack.config.js omite devtool, debug, pathinfo, y el minmize plugin en favor de estos dos indicadores.

    • Gracias @everett1992 , esta solución funciona muy bien. La gran mayoría de la vez que ejecute el dev construir, luego cuando me he hecho uso de la opción-p para escupir un record de construcción de producción. No hay necesidad de crear dos Webpack configs!
  5. 36

    Tal vez soy yo tarde aquí, pero tengo el mismo problema, así que escribí un unminified-webpack-plugin para este propósito.

    Instalación

    npm install --save-dev unminified-webpack-plugin

    Uso

    var path = require('path');
    var webpack = require('webpack');
    var UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
    
    module.exports = {
        entry: {
            index: './src/index.js'
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'library.min.js'
        },
        plugins: [
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                }
            }),
            new UnminifiedWebpackPlugin()
        ]
    };

    Haciendo como en el anterior, se obtienen dos archivos library.min.js y library.js. No hay necesidad de ejecutar webpack dos veces, simplemente funciona!^^

    • Este plugin parece no ser compatible con SourceMapDevToolPlugin. Cualquier sugerencia para conservar la fuente de los mapas?
    • no se admite. ¿Usted piensa que usted realmente necesita fuente de mapa de salida junto con el último archivo js?
    • «No hay necesidad de ejecutar webpack dos veces […]» Agradable, pero estus‘s solución no requiere «ejecutar webpack dos veces» y, además, no requiere la adición de un tercer partido en el complemento.
    • Hombre, estás justo a tiempo :). Al menos, para mí. Muchas gracias por el gran plug-in! Parece que funciona perfectamente con webpack 2 y la opción-p.
  6. 33

    En mi opinión es un mucho más fácil usar el UglifyJS herramienta directamente:

    1. npm install --save-dev uglify-js
    2. Uso webpack como normal, como por ejemplo la construcción de un ./dst/bundle.js archivo.
    3. Agregar un build comando a su package.json:

      "scripts": {
          "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map"
      }
    4. Cuando quieras construir un paquete así como uglified código y sourcemaps, ejecute el npm run build comando.

    Sin necesidad de instalar uglify-js a nivel mundial, sólo tienes que instalar de forma local para el proyecto.

    • sí, esta es una sencilla solución que le permite construir sólo una vez
  7. 15

    Puede crear dos configuraciones para webpack, que minifies el código y uno que no (sólo quitar el optimizar.UglifyJSPlugin línea) y, a continuación, ejecutar ambas configuraciones al mismo tiempo $ webpack && webpack --config webpack.config.min.js

    • Gracias, esto funciona muy bien, pero seguro que sería agradable si había una manera mejor de hacerlo que mantener dos archivos de configuración, dado que este es un caso de uso habitual (sólo acerca de cualquier biblioteca de la construcción).
  8. 12

    De acuerdo con esta línea: https://github.com/pingyuanChen/webpack-uglify-js-plugin/blob/master/index.js#L117

    debería ser algo así como:

    var webpack = require("webpack");
    
    module.exports = {
    
      entry: "./entry.js",
      devtool: "source-map",
      output: {
        path: "./dist",
        filename: "bundle.js"
      },
      plugins: [
        new webpack.optimize.UglifyJsPlugin({
         minimize: true,
         compress: false
        })
      ]
    };

    De hecho, usted puede tener múltiples construye por medio de la exportación de diferentes configuraciones de acuerdo a su env /argv estrategias.

    • Gracias por tu respuesta útil en una edad-pero-de alguna manera-aún-pregunta pertinente, Mauro ^_^
    • No se puede encontrar la opción minimize en google docs. Quizás es obsoleto?
    • Tal vez usted está utilizando una versión más reciente del plugin y no es el único, incluido dentro de webpack?
  9. 4

    Te puede dar formato a su webpack.config.js como este:

    var debug = process.env.NODE_ENV !== "production";
    var webpack = require('webpack');
    
    module.exports = {
        context: __dirname,
        devtool: debug ? "inline-sourcemap" : null,
        entry: "./entry.js",
        output: {
            path: __dirname + "/dist",
            filename: "library.min.js"
        },
        plugins: debug ? [] : [
            new webpack.optimize.DedupePlugin(),
            new webpack.optimize.OccurenceOrderPlugin(),
            new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
        ],
    };'

    Y, a continuación, construir unminified ejecutar (mientras que en el proyecto del directorio principal):

    $ webpack

    Para construir el record de ejecución:

    $ NODE_ENV=production webpack

    Notas:
    Asegúrese de que para el unminified versión de cambiar el nombre del archivo de salida a library.js y para el record de library.min.js para que no se superponen.

  10. 3

    Tuve el mismo problema, y tuvo que cumplir todos estos requisitos:

    • Record + No reducirá la versión (como en la pregunta)
    • ES6
    • Multiplataforma (Windows + Linux).

    Finalmente he resuelto de la siguiente manera:

    webpack.config.js:

    const path = require('path');
    const MinifyPlugin = require("babel-minify-webpack-plugin");
    
    module.exports = getConfiguration;
    
    function getConfiguration(env) {
        var outFile;
        var plugins = [];
        if (env === 'prod') {
            outFile = 'mylib.dev';
            plugins.push(new MinifyPlugin());
        } else {
            if (env !== 'dev') {
                console.log('Unknown env ' + env + '. Defaults to dev');
            }
            outFile = 'mylib.dev.debug';
        }
    
        var entry = {};
        entry[outFile] = './src/mylib-entry.js';
    
        return {
            entry: entry,
            plugins: plugins,
            output: {
                filename: '[name].js',
                path: __dirname
            }
        };
    }

    paquete.json:

    {
        "name": "mylib.js",
        ...
        "scripts": {
            "build": "npm-run-all webpack-prod webpack-dev",
            "webpack-prod": "npx webpack --env=prod",
            "webpack-dev": "npx webpack --env=dev"
        },
        "devDependencies": {
            ...
            "babel-minify-webpack-plugin": "^0.2.0",
            "npm-run-all": "^4.1.2",
            "webpack": "^3.10.0"
        }
    }

    Entonces puedo construir por (no olvides npm install antes):

    npm run-script build
    • Tengo este error ERROR en desconocido: no Válido typeof valor
  11. 0

    He encontrado una nueva solución para este problema.

    Este utiliza una matriz de configuración para habilitar webpack para construir el record y no reducirá la versión en paralelo. Esto hace que construir más rápido. No hay necesidad de ejecutar el webpack dos veces. No hay necesidad de complementos extra. Sólo webpack.

    webpack.config.js

    const devConfig = {
      mode: 'development',
      entry: { bundle: './src/entry.js' },
      output: { filename: '[name].js' },
      module: { ... },
      resolve: { ... },
      plugins: { ... }
    };
    
    const prodConfig = {
      ...devConfig,
      mode: 'production',
      output: { filename: '[name].min.js' }
    };
    
    module.exports = (env) => {
      switch (env) {
        case 'production':
          return [devConfig, prodConfig];
        default:
          return devConfig;
      }
    };

    Ejecución webpack sólo construir el no-record de versión.

    Ejecución webpack --env=production va a construir el record y no reducirá la versión al mismo tiempo.

  12. 0

    Debe exportar una matriz como esta:

    const path = require('path');
    const webpack = require('webpack');
    
    const libName = 'YourLibraryName';
    
    function getConfig(env) {
      const config = {
        mode: env,
        output: {
          path: path.resolve('dist'),
          library: libName,
          libraryTarget: 'umd',
          filename: env === 'production' ? `${libName}.min.js` : `${libName}.js`
        },
        target: 'web',
        .... your shared options ...
      };
    
      return config;
    }
    
    module.exports = [
      getConfig('development'),
      getConfig('production'),
    ];
  13. -1

    Puede definir dos puntos de entrada en el webpack de configuración, para su normal js y el otro para el record de js. Entonces usted debe salida de su paquete con su nombre, y configurar UglifyJS plugin para incluir min.js los archivos. Ver el ejemplo webpack de configuración para obtener más detalles:

    module.exports = {
     entry: {
       'bundle': './src/index.js',
       'bundle.min': './src/index.js',
     },
    
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: "[name].js"
     },
    
     plugins: [
       new webpack.optimize.UglifyJsPlugin({
          include: /\.min\.js$/,
          minimize: true
       })
     ]
    };

    Después de ejecutar webpack, usted conseguirá el bundle.js y bundle.min.js en su carpeta dist, sin necesidad de plugin extra.

    • obsoleto explicación

Dejar respuesta

Please enter your comment!
Please enter your name here