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 dist
Ordner bekomme ich nur
bundle.min.js
bundle.min.js.map
Ich würde auch gerne das unkomprimierte sehen bundle.js
javascript
node.js
webpack
Danke dir
quelle
quelle
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
Sie können eine einzelne Konfigurationsdatei verwenden und das UglifyJS-Plugin unter Verwendung einer Umgebungsvariablen bedingt einbinden:
und setzen Sie diese Variable dann einfach, wenn Sie sie minimieren möchten:
Bearbeiten:
Wie in den Kommentaren erwähnt,
NODE_ENV
wird im Allgemeinen (gemäß Konvention) angegeben, ob eine bestimmte Umgebung eine Produktions- oder eine Entwicklungsumgebung ist. Um dies zu überprüfen, können Sie auch festlegenvar PROD = (process.env.NODE_ENV === 'production')
und normal fortfahren.quelle
compress
statt aufgerufenminimize
?webpack -p
die Einstellungen von webpack.optimize.UglifyJsPlugin in Ihrer Webpack-Konfiguration, werden diese (zumindest teilweise) ignoriert (zumindest wird die Einstellungmangle: false
ignoriert).webpack && webpack -p
.definePlugin
stattdessen zu verwenden, was meiner Meinung nach standardmäßig mit Webpack installiert ist.Sie können das Webpack zweimal mit verschiedenen Argumenten ausführen:
Überprüfen Sie dann die Befehlszeilenargumente in
webpack.config.js
:Beispiel webpack.config.js
quelle
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
-p
Flag möglicherweise nicht Ihrem Anwendungsfall entspricht.Umgekehrt ist die
-d
Option kurz für--debug
--devtool sourcemap
--output-pathinfo
Mein webpack.config.js auslässt
devtool
,debug
,pathinfo
und das minmize Plugin für diese beiden Fahnen.quelle
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
Verwendung
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! ^^
quelle
Meiner Meinung nach ist es viel einfacher, das UglifyJS- Tool direkt zu verwenden:
npm install --save-dev uglify-js
./dst/bundle.js
. Datei.Fügen Sie
build
Ihrem Befehl einen Befehl hinzupackage.json
:npm run build
Befehl 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.
quelle
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
quelle
Nach dieser Zeile: https://github.com/pingyuanChen/webpack-uglify-js-plugin/blob/master/index.js#L117
sollte so etwas sein wie:
In der Tat können Sie mehrere Builds erstellen, indem Sie verschiedene Konfigurationen gemäß Ihren env / argv-Strategien exportieren.
quelle
minimize
in Dokumenten nicht gefunden. Vielleicht ist es veraltet?arbeitet für mich mit
-p
Flagge.quelle
Sie können Ihre webpack.config.js wie folgt formatieren:
Und dann, um es unminifiziert zu erstellen, laufen Sie (während Sie sich im Hauptverzeichnis des Projekts befinden):
So erstellen Sie einen minimierten Lauf:
Hinweise: Stellen Sie sicher, dass Sie für die nicht minimierte Version den Namen der Ausgabedatei in
library.js
und für die minimierte Version ändern,library.min.js
damit sie sich nicht gegenseitig überschreiben.quelle
Ich hatte das gleiche Problem und musste alle diese Anforderungen erfüllen:
Ich habe es schließlich wie folgt gelöst:
webpack.config.js:
package.json:
Dann kann ich bauen durch (Vergiss
npm install
vorher nicht):quelle
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
Beim Ausführen
webpack
wird nur die nicht minimierte Version erstellt.Durch Ausführen
webpack --env=production
werden gleichzeitig die minimierte und die nicht minimierte Version erstellt.quelle
Sie sollten ein Array wie folgt exportieren:
quelle
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:
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.
quelle