web-dev-qa-db-fra.com

Comment construire un paquet 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 dossier dist, je ne reçois que

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

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

javascriptnode.jswebpack
215
user633183

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.UglifyJsPlugin est obsolète et son utilisation entraîne une erreur:

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

Comme le manuel explique, le plugin peut être remplacé par l'option minimize. Une configuration personnalisée peut être fournie au plug-in en spécifiant UglifyJsPlugin instance:

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 installation simple. Une solution plus efficace consiste à utiliser Gulp avec Webpack et à faire la même chose en un seul passage.

137
Estus Flask

Vous pouvez utiliser un seul fichier de configuration et inclure le plug-in UglifyJS de manière conditionnelle à 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 }
    })
  ] : []
};

et ensuite il suffit de définir cette variable lorsque vous souhaitez la réduire:

$ PROD_ENV=1 webpack


Edit:

Comme mentionné dans les commentaires, NODE_ENV est 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.

155
lyosef

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

$ webpack --minimize

puis vérifiez les arguments de 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

54
Gordon Freeman

Pour ajouter une autre réponse, l'indicateur -p (abréviation de --optimize-minimize) activera UglifyJS avec les arguments par défaut.

Vous n'obtiendrez pas un ensemble restreint et brut à partir d'un seul cycle, ni ne générerez des ensembles portant un nom différent, de sorte que l'indicateur -p ne corresponde pas nécessairement à votre cas d'utilisation.

Inversement, l'option -d est un raccourci pour --debug--devtool sourcemap--output-pathinfo

Mon webpack.config.js omet devtool, debug, pathinfo et le plug-in minmize en faveur de ces deux drapeaux.

40
everett1992

Peut-être que je suis en retard ici, mais j'ai le même problème, alors j'ai écrit un nminified-webpack-plugin à cet effet.

Installation 

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

Utilisation 

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 webpack deux fois, ça marche! ^^

36
Howard

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

  1. npm install --save-dev uglify-js
  2. Utilisez webpack comme d'habitude, par exemple construire un fichier ./dst/bundle.js.

  3. Ajoutez une commande build à 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 et des cartes sources simplifiés, exécutez la commande npm run build.

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

33
Dave Kerr

Vous pouvez créer deux configurations pour Webpack, une qui minimise le code et une autre (ne supprimez que la ligne optimise.UglifyJSPlugin), puis exécutez les deux configurations en même temps $ webpack && webpack --config webpack.config.min.js

15
trekforever

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 versions en exportant différentes configurations en fonction de vos stratégies env/argv.

12
Ideabile

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 ensuite, pour le construire non finifié, (dans le répertoire principal du projet):

$ webpack

Pour le construire, procédez comme suit:

$ NODE_ENV=production webpack

Remarques: Assurez-vous que pour la version non minisée, vous modifiez le nom du fichier de sortie en library.js et pour le minified library.min.js afin qu'ils ne se écrasent pas.

4
cnzac

webpack entry.jsx ./output.js -p

fonctionne pour moi, avec le drapeau -p.

4
gdfgdfg

J'avais le même problème et je devais satisfaire à toutes ces exigences:

  • Version minifiée + non minifiée (comme dans la question)
  • ES6
  • Plateforme transversale (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 de npm install avant):

npm run-script build
3
MaMazav

Vous devriez exporter un tableau comme ceci:

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

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

Ceci utilise un tableau de configuration pour permettre à 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;
  }
};

Lancer webpack ne construira que la version non minifiée.

Lancer webpack --env=production construira les versions minifiée et non-minifiée en même temps.

0
Rannie Aguilar Peralta