Comment construire un bundle minifié et non compressé avec webpack?

Voici mon 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})
  ]
};

Je construis avec

$ webpack

Dans mon distdossier, je reçois seulement

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

J'aimerais aussi voir le non compressé bundle.js

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
    })
  ]
};

Depuis Webpack 4, webpack.optimize.UglifyJsPluginest obsolète et son utilisation entraîne une erreur:

webpack.optimize.UglifyJsPlugin a été supprimé, utilisez plutôt config.optimization.minimize

Comme l' explique le manuel , le plugin peut être remplacé par minimizeoption. Une configuration personnalisée peut être fournie au plugin en spécifiant l' UglifyJsPlugininstance:

const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new UglifyJsPlugin({
      include: /\.min\.js$/
    })]
  }
};

Cela fait le travail pour une configuration simple. Une solution plus efficace consiste à utiliser Gulp avec Webpack et à faire la même chose en un seul passage.

Vous pouvez utiliser un seul fichier de configuration et inclure le plugin UglifyJS sous condition à l'aide d'une variable d'environnement:

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 }
    })
  ] : []
};

puis définissez simplement cette variable lorsque vous souhaitez la réduire:

$ PROD_ENV=1 webpack

Éditer:

Comme mentionné dans les commentaires, NODE_ENVest généralement utilisé (par convention) pour indiquer si un environnement particulier est un environnement de production ou de développement. Pour le vérifier, vous pouvez également définir var PROD = (process.env.NODE_ENV === 'production')et continuer normalement.

Vous pouvez exécuter Webpack deux fois avec différents arguments:

$ webpack --minimize

puis vérifiez les arguments de la ligne de commande dans 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());
}

...

exemple webpack.config.js

Pour ajouter une autre réponse, le drapeau -p(abréviation de --optimize-minimize) activera UglifyJS avec des arguments par défaut.

Vous n'obtiendrez pas un bundle réduit et brut lors d'une seule exécution ou ne générerez pas de bundles nommés différemment, de sorte que l' -pindicateur peut ne pas correspondre à votre cas d'utilisation.

Inversement, l' -doption est courte pour--debug --devtool sourcemap --output-pathinfo

Mon webpack.config.js passe sous silence devtool, debug, pathinfoet le minmize plug - in en faveur de ces deux drapeaux.

Je suis peut-être en retard ici, mais j'ai le même problème, j'ai donc écrit un plugin non-webpack à cet effet.

Installation

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

Usage

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()
    ]
};

En procédant comme ci-dessus, vous obtiendrez deux fichiers library.min.js et library.js. Pas besoin d'exécuter le webpack deux fois, cela fonctionne! ^^

À mon avis, il est beaucoup plus facile d'utiliser directement l'outil UglifyJS :

1. npm install --save-dev uglify-js
2. Utilisez le webpack comme d'habitude, par exemple en créant un ./dst/bundle.jsfichier.

3. Ajoutez une buildcommande à votre package.json:

   "scripts": {
       "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map"
   }

4. Chaque fois que vous souhaitez créer un bundle ainsi que du code uglified et des sourcemaps, exécutez la npm run buildcommande.

Pas besoin d'installer uglify-js globalement, installez-le simplement localement pour le projet.

Vous pouvez créer deux configurations pour webpack, une qui réduit le code et une qui ne le fait pas (supprimez simplement la ligne d'optimiser.UglifyJSPlugin), puis exécutez les deux configurations en même temps $ webpack && webpack --config webpack.config.min.js

Selon cette ligne: https://github.com/pingyuanChen/webpack-uglify-js-plugin/blob/master/index.js#L117

devrait être quelque chose comme:

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
    })
  ]
};

En effet, vous pouvez avoir plusieurs builds en exportant différentes configurations en fonction de vos stratégies env / argv.

webpack entry.jsx ./output.js -p

travaille pour moi, avec -pdrapeau.

Vous pouvez formater votre webpack.config.js comme ceci:

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 }),
    ],
};'

Et puis pour le construire en exécution non minimisée (dans le répertoire principal du projet):

$ webpack

Pour le construire en run minifié:

$ NODE_ENV=production webpack

Remarques: Assurez-vous que pour la version non minimisée, vous modifiez le nom du fichier de sortie pour library.jset pour le minifié library.min.jsafin qu'ils ne se remplacent pas.

J'ai eu le même problème et j'ai dû répondre à toutes ces exigences:

• Version minifiée + non minifiée (comme dans la question)
• ES6
• Multiplateforme (Windows + Linux).

Je l'ai finalement résolu comme suit:

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
        }
    };
}

package.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"
    }
}

Ensuite, je peux construire par (N'oubliez pas npm installavant):

npm run-script build

J'ai trouvé une nouvelle solution à ce problème.

Cela utilise un tableau de configuration pour permettre au webpack de construire la version minifiée et non minifiée en parallèle. Cela rend la construction plus rapide. Pas besoin d'exécuter le webpack deux fois. Pas besoin de plugins supplémentaires. Juste 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;
  }
};

L'exécution webpackne génèrera que la version non réduite.

L'exécution webpack --env=productiongénérera la version minifiée et non minifiée en même temps.

Vous devez exporter un tableau comme celui-ci:

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'),
];

Vous pouvez définir deux points d'entrée dans votre configuration de webpack, l'un pour vos js normaux et l'autre pour les js minifiés. Ensuite, vous devez sortir votre bundle avec son nom et configurer le plugin UglifyJS pour inclure les fichiers min.js. Voir l'exemple de configuration de webpack pour plus de détails:

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
   })
 ]
};

Après avoir exécuté webpack, vous obtiendrez bundle.js et bundle.min.js dans votre dossier dist, pas besoin de plugin supplémentaire.