Comment construire un bundle minifié et non compressé avec webpack?

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.

, 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

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.

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

, À 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.

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

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.

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

Fonctionne pour moi, avec -p drapeau.

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.

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

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.