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

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

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.

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.

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

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.

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! ^^

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.

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

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.

webpack entry.jsx ./output.js -p

arbeitet für mich mit -pFlagge.

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.

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

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.

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

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.