Как построить minified и несжатый пакет с webpack?

вы можете использовать один файл конфигурации и включить плагин UglifyJS условно, используя переменную среды:

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

а затем просто установите эту переменную, когда вы хотите ее уменьшить:

$ PROD_ENV=1 webpack

Edit:

как уже упоминалось в комментариях, NODE_ENV обычно используется (по соглашению), чтобы указать, является ли конкретная среда производственной или средой разработки. Чтобы проверить это, вы также можете установить var PROD = (process.env.NODE_ENV === 'production') и далее обычно.

вы можете запустить webpack дважды с разными аргументами:

$ webpack --minimize

затем проверьте аргументы командной строки в 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());
}

...

пример webpack.конфиг.js

добавить еще один ответ, флаг -p (сокращенно --optimize-minimize) включит UglifyJS с аргументами по умолчанию.

вы не получите minified и raw bundle из одного запуска или генерировать по-разному названные пакеты, так что -p флаг может не соответствовать вашему варианту использования.

напротив сокращенно --debug --devtool sourcemap --output-pathinfo

мой webpack.конфиг.js опускает devtool, debug, pathinfo, и плагин minmize в пользу этих двух флаги.

может быть, я опоздал, но у меня такая же проблема, поэтому я написал unminified-webpack-плагин для этой цели.

установка

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

использование

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

делая, как указано выше, вы получите две библиотеки файлов.минута.js и библиотека.js. Нет необходимости выполнять webpack дважды, он просто работает!^^

по-моему, это много проще просто использовать UglifyJS напрямую:

1. npm install --save-dev uglify-js
2. используйте webpack как обычно, например, построение .

3. добавить на package.json:

   "scripts": {
       "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map"
   }
   

4. всякий раз, когда вы хотите построить ваш комплект, а также uglified код и sourcemaps, запустить

вы можете создать две конфигурации для webpack, один из которых минимизирует код, а другой - нет (просто удалите оптимизацию.UglifyJSPlugin line), а затем запустить обе конфигурации одновременно $ webpack && webpack --config webpack.config.min.js

в соответствии с этой строкой: https://github.com/pingyuanChen/webpack-uglify-js-plugin/blob/master/index.js#L117

должно быть что-то вроде:

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

действительно, Вы можете иметь несколько сборок, экспортируя различные конфигурации в соответствии с вашими стратегиями env / argv.

webpack запись.jsx ./выход.js-p

работает для меня, с -p флаг.

вы можете отформатировать свой webpack.конфиг.js как это:

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

а затем, чтобы построить его unminified run (в то время как в главном каталоге проекта):

$ webpack

чтобы построить его minified run:

$ NODE_ENV=production webpack

заметки: Убедитесь, что для unminified версии вы измените имя выходного файла library.js и для minified library.min.js таким образом, они не перезаписывают друг друга.

у меня была такая же проблема, и я должен был удовлетворить все эти требования:

• Minified + Non minified версия (как в вопросе)
• ЕС6
• кросс-платформенный (Windows + Linux).

Я, наконец, решил ее следующим образом:

webpack.конфиг.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
        }
    };
}

пакета.в 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"
    }
}

тогда я могу построить (не забудьте npm install до):

npm run-script build

вы можете определить две точки входа в вашей конфигурации webpack, одну для вашего обычного js, а другую для minified js. Затем вы должны вывести свой пакет с его именем и настроить плагин UglifyJS для включения min.файлы js. Дополнительные сведения см. В примере конфигурации webpack:

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

после запуска webpack вы получите пакет.JS и пакет.минута.js в вашей папке dist, нет необходимости в дополнительном плагине.