Wie erstelle ich ein minimiertes und unkomprimiertes Bundle mit einem Webpack?

233

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

Ich baue mit

$ webpack

In meinem distOrdner bekomme ich nur

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

Ich würde auch gerne das unkomprimierte sehen bundle.js

Danke dir
quelle

Antworten:

151

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

Da Webpack 4 webpack.optimize.UglifyJsPluginveraltet ist und seine Verwendung zu Fehlern führt:

webpack.optimize.UglifyJsPlugin wurde entfernt. Verwenden Sie stattdessen config.optimization.minimize

Wie im Handbuch erläutert, kann das Plugin durch eine minimizeOption ersetzt werden. Das Plugin kann durch Angabe der UglifyJsPluginInstanz benutzerdefiniert konfiguriert werden :

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

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

Dies erledigt den Job für eine einfache Einrichtung. Eine effektivere Lösung besteht darin, Gulp zusammen mit Webpack zu verwenden und dasselbe in einem Durchgang zu tun.

Estus Flask
quelle
1
@FeloVilches Ich erwähne nicht einmal, dass dies in webpack.config.js gemacht wird, aber dies wird vorausgesetzt, sobald wir in Node.js Land sind und Webpack verwenden.
Estus Flask
3
Hmm, in Webpack 4 habe ich:Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
Entithat
3
Update: Jetzt können Sie terser-webpack-plugin webpack.js.org/plugins/terser-webpack-plugin
ijse
156

Sie können eine einzelne Konfigurationsdatei verwenden und das UglifyJS-Plugin unter Verwendung einer Umgebungsvariablen bedingt einbinden:

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

und setzen Sie diese Variable dann einfach, wenn Sie sie minimieren möchten:

$ PROD_ENV=1 webpack


Bearbeiten:

Wie in den Kommentaren erwähnt, NODE_ENVwird im Allgemeinen (gemäß Konvention) angegeben, ob eine bestimmte Umgebung eine Produktions- oder eine Entwicklungsumgebung ist. Um dies zu überprüfen, können Sie auch festlegen var PROD = (process.env.NODE_ENV === 'production')und normal fortfahren.

Lyosef
quelle
6
Der Knoten hat dafür eine "Standard" -Variable, die NODE_ENV heißt.
JCM
2
Wird die Option nicht compressstatt aufgerufen minimize?
Slava Fomin II
1
Nur ein kleines Problem: Wenn Sie Webpack mit Argumenten aufrufen, wie webpack -pdie Einstellungen von webpack.optimize.UglifyJsPlugin in Ihrer Webpack-Konfiguration, werden diese (zumindest teilweise) ignoriert (zumindest wird die Einstellung mangle: falseignoriert).
Christian Ulbrich
2
Beachten Sie, dass dadurch jeweils nur eine Datei generiert wird. Damit dies für die Frage funktioniert, sollten mehrere Webpack-Durchgänge vorhanden sein webpack && webpack -p.
Estus Flask
1
Für jeden, der dies liest, würde ich empfehlen, definePluginstattdessen zu verwenden, was meiner Meinung nach standardmäßig mit Webpack installiert ist.
Ben Gubler
54

Sie können das Webpack zweimal mit verschiedenen Argumenten ausführen:

$ webpack --minimize

Überprüfen Sie dann die Befehlszeilenargumente in 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());
}

...

Beispiel webpack.config.js

Gordon Freeman
quelle
2
Scheint mir eine sehr einfache Lösung zu sein; Ab Webpack v3.5.5 gibt es einen integrierten Schalter namens --optimize-minim oder -p.
Synergie
Die Idee ist cool, funktioniert aber jetzt nicht. Das Webpack schreit "Unbekanntes Argument: Minimieren". Lösung: Verwenden Sie --env.minimieren Sie weitere Details unter dem folgenden Link: github.com/webpack/webpack/issues/2254
Zhli
Kann eine Standardmethode verwenden, um die Umgebungsangabe im Webpack zu übergeben: stackoverflow.com/questions/44113359/…
MaMazav
40

Um eine weitere Antwort hinzuzufügen, das Flag -p(kurz für--optimize-minimize aktiviert das ) das UglifyJS mit Standardargumenten.

Sie erhalten kein minimiertes und unformatiertes Bundle aus einem einzigen Lauf oder generieren Bundles mit unterschiedlichen Namen, sodass das -pFlag möglicherweise nicht Ihrem Anwendungsfall entspricht.

Umgekehrt ist die -dOption kurz für--debug --devtool sourcemap --output-pathinfo

Mein webpack.config.js auslässt devtool, debug, pathinfound das minmize Plugin für diese beiden Fahnen.

everett1992
quelle
Danke @ everett1992, diese Lösung funktioniert großartig. Die überwiegende Mehrheit der Zeit, in der ich den Entwickler-Build ausführe, verwende ich dann, wenn ich fertig bin, das Flag -p, um einen minimierten Produktions-Build auszuspucken. Sie müssen keine zwei separaten Webpack-Konfigurationen erstellen!
pmont
36

Vielleicht bin ich zu spät hier, aber ich habe das gleiche Problem, also habe ich zu diesem Zweck ein unminified-Webpack-Plugin geschrieben .

Installation

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

Verwendung

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

Wenn Sie wie oben beschrieben vorgehen, erhalten Sie zwei Dateien library.min.js und library.js. Webpack muss nicht zweimal ausgeführt werden, es funktioniert einfach! ^^

Howard
quelle
Dieses Plugin scheint nicht mit SourceMapDevToolPlugin kompatibel zu sein. Irgendwelche Vorschläge, um Quellkarten beizubehalten?
BhavikUp
@ BhavikUp, es wird nicht unterstützt. Denken Sie, dass Sie wirklich eine Quellzuordnung benötigen, um zusammen mit der endgültigen js-Datei ausgegeben zu werden?
Howard
1
"Webpack muss nicht zweimal ausgeführt werden [...]" Schön, aber für die Lösung von estus muss Webpack nicht zweimal ausgeführt werden, und es muss kein Plugin eines Drittanbieters hinzugefügt werden.
Louis
@ Howard Man, du bist pünktlich :). Zumindest für mich. Vielen Dank für das tolle Plug-In! Scheint perfekt mit Webpack 2 und -p Option zu funktionieren.
Gaperton
34

Meiner Meinung nach ist es viel einfacher, das UglifyJS- Tool direkt zu verwenden:

  1. npm install --save-dev uglify-js
  2. Verwenden Sie das Webpack wie gewohnt, z. B. Erstellen eines ./dst/bundle.js . Datei.
  3. Fügen Sie buildIhrem Befehl einen Befehl hinzu package.json:

    "scripts": {
        "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map"
    }
  4. Führen Sie den npm run buildBefehl aus, wenn Sie ein Bundle sowie hässlichen Code und Quellkarten erstellen möchten .

Sie müssen uglify-js nicht global installieren, sondern nur lokal für das Projekt installieren.

Dave Kerr
quelle
Ja, dies ist eine einfache Lösung, mit der Sie nur einmal bauen können
Flion
15

Sie können zwei Konfigurationen für das Webpack erstellen, eine, die den Code minimiert, und eine, die dies nicht tut (entfernen Sie einfach die Zeile optimize.UglifyJSPlugin) und dann beide Konfigurationen gleichzeitig ausführen $ webpack && webpack --config webpack.config.min.js

für immer
quelle
2
Vielen Dank, das funktioniert großartig, aber es wäre sicher schön, wenn es einen besseren Weg gäbe, dies zu tun, als zwei Konfigurationsdateien zu verwalten, da dies ein so häufiger Anwendungsfall ist (fast jeder Bibliotheksaufbau).
Rick Strahl
12

Nach dieser Zeile: https://github.com/pingyuanChen/webpack-uglify-js-plugin/blob/master/index.js#L117

sollte so etwas sein wie:

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

In der Tat können Sie mehrere Builds erstellen, indem Sie verschiedene Konfigurationen gemäß Ihren env / argv-Strategien exportieren.

Ideabile
quelle
Vielen Dank für Ihre hilfreiche Antwort auf eine alte, aber irgendwie immer noch relevante Frage, Mauro ^ _ ^
Vielen Dank
1
Option minimizein Dokumenten nicht gefunden. Vielleicht ist es veraltet?
adi518
@ adi518 Vielleicht verwenden Sie eine neuere Version des Plugins und nicht die im Webpack enthaltene?
Thexpand
4

webpack entry.jsx ./output.js -p

arbeitet für mich mit -pFlagge.

gdfgdfg
quelle
4

Sie können Ihre webpack.config.js wie folgt formatieren:

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

Und dann, um es unminifiziert zu erstellen, laufen Sie (während Sie sich im Hauptverzeichnis des Projekts befinden):

$ webpack

So erstellen Sie einen minimierten Lauf:

$ NODE_ENV=production webpack

Hinweise: Stellen Sie sicher, dass Sie für die nicht minimierte Version den Namen der Ausgabedatei in library.jsund für die minimierte Version ändern, library.min.jsdamit sie sich nicht gegenseitig überschreiben.

cnzac
quelle
3

Ich hatte das gleiche Problem und musste alle diese Anforderungen erfüllen:

  • Minimierte + nicht minimierte Version (wie in der Frage)
  • ES6
  • Plattformübergreifend (Windows + Linux).

Ich habe es schließlich wie folgt gelöst:

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

Dann kann ich bauen durch (Vergiss npm installvorher nicht):

npm run-script build
MaMazav
quelle
Ich habe diesen Fehler ERROR in unbekannt: Ungültiger
Werttyp
3

Ich habe eine neue Lösung für dieses Problem gefunden.

Dies verwendet ein Array von Konfigurationen, damit Webpack die minimierte und nicht minimierte Version parallel erstellen kann. Dies macht das Bauen schneller. Das Webpack muss nicht zweimal ausgeführt werden. Keine zusätzlichen Plugins erforderlich. Nur 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;
  }
};

Beim Ausführen webpackwird nur die nicht minimierte Version erstellt.

Durch Ausführen webpack --env=productionwerden gleichzeitig die minimierte und die nicht minimierte Version erstellt.

Rannie Aguilar Peralta
quelle
1

Sie sollten ein Array wie folgt exportieren:

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

Sie können zwei Einstiegspunkte in Ihrer Webpack-Konfiguration definieren, einen für Ihre normalen js und einen für minimierte js. Dann sollten Sie Ihr Bundle mit seinem Namen ausgeben und das UglifyJS-Plugin so konfigurieren, dass es min.js-Dateien enthält. Weitere Informationen finden Sie in der Beispiel-Webpack-Konfiguration:

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

Nach dem Ausführen von webpack erhalten Sie bundle.js und bundle.min.js in Ihrem dist-Ordner, ohne dass ein zusätzliches Plugin erforderlich ist.

dyg
quelle
veraltete Erklärung
Olaf