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 dossier dist, Je ne reçois que

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

J'aimerais aussi voir le bundle.js{[8 non compressé]}

196
demandé sur user633183 2014-09-21 11:36:49

12 réponses

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 a été obsolète et son utilisation entraîne une erreur:

Webpack.optimiser.UglifyJsPlugin a été supprimé, veuillez utiliser config.optimisation.réduire à la place

Comme l'explique le manuel , le plugin peut être remplacé par l'option minimize. Une configuration personnalisée peut être fournie au plugin 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 configuration simple. Plus efficace la solution consiste à utiliser Gulp avec Webpack et à faire la même chose en un seul passage.

122
répondu estus 2018-06-26 16:52:55

Vous pouvez utiliser un seul fichier de configuration, et inclure le plugin UglifyJS conditionnellement en utilisant 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 puis définissez simplement cette variable lorsque vous voulez la réduire:

$ PROD_ENV=1 webpack


Modifier:

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 un environnement de développement. Pour le vérifier, vous pouvez également définir var PROD = (process.env.NODE_ENV === 'production'), et continuer normalement.

149
répondu lyosef 2016-04-02 23:24:48

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

$ webpack --minimize

Vérifiez ensuite 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

53
répondu Gordon Freeman 2016-02-09 14:54:47

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

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

, Réciproquement, la -d option est court pour --debug --devtool sourcemap --output-pathinfo

Mon webpack.config.js omet devtool, debug, pathinfo, et le minmize plugin en faveur de ces deux indicateurs.

39
répondu everett1992 2016-12-13 19:21:36

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

Installation

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

L'Utilisation de

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 faisant comme ci-dessus, vous obtiendrez deux bibliothèques de fichiers.min.js et de la bibliothèque.js. Pas besoin d'exécuter webpack deux fois, ça marche!^^

36
répondu Howard 2016-05-12 15:44:03

, À mon avis, c'est un beaucoup plus facile que d'utiliser la UglifyJS directement à l'outil:

  1. npm install --save-dev uglify-js
  2. utilisez webpack comme d'habitude, par exemple en construisant 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 voulez créer un bundle ainsi que du code uglified et des sourcemaps, exécutez la commande npm run build.

Pas besoin d'installer uglify-js Globalement, il suffit de l'installer localement pour le projet.

32
répondu Dave Kerr 2016-06-11 10:01:43

Vous pouvez créer deux configurations pour webpack, une qui minimise le code et une autre qui ne le fait pas (supprimez simplement l'optimisation.Ligne UglifyJSPlugin), puis exécutez les deux configurations en même temps $ webpack && webpack --config webpack.config.min.js

15
répondu trekforever 2014-10-04 21:26:16

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.

11
répondu Ideabile 2017-01-30 10:31:22

Entrée Webpack.jsx ./sortie.js-p

Fonctionne pour moi, avec -p drapeau.

4
répondu gdfgdfg 2016-11-23 19:02:14

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 unminified run (alors que dans le répertoire principal du projet):

$ webpack

Pour le construire minifié run:

$ NODE_ENV=production webpack

Notes: Assurez-vous que pour la version non minifiée, vous changez le nom du fichier de sortie en library.js et pour la version minifiée library.min.js afin qu'ils ne s'écrasent pas.

4
répondu cnzac 2017-01-28 19:51:41

J'ai eu le même problème, et devaient satisfaire à toutes ces exigences:

  • Version minifiée + Non minifiée (comme dans la question)
  • ES6
  • plateforme croisée (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
        }
    };
}

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

, Puis je peux construire par (N'oubliez pas de npm install avant):

npm run-script build
3
répondu MaMazav 2018-01-24 06:25:21

Vous pouvez définir deux points d'entrée dans votre configuration webpack, un pour votre js normal et l'autre pour js minifié. Ensuite, vous devez sortir votre bundle avec son nom, et configurer le plugin UglifyJS pour inclure min.fichiers js. Voir l'exemple de configuration 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.

-1
répondu dyg 2017-10-18 14:56:50