Як створити мінімізований та нестиснений пакет із веб-пакетом?


233

Ось моя 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})
  ]
};

Я будую з

$ webpack

У мою distпапку я лише потрапляю

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

Я також хотів би бачити нестиснутого bundle.js

Відповіді:


151

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

Оскільки Webpack 4 webpack.optimize.UglifyJsPluginзастарілий, його використання призводить до помилки:

webpack.optimize.UglifyJsPlugin видалено, замість цього скористайтеся config.optimization.minimize

Як пояснюється в посібнику , плагін можна замінити minimizeопцією. Спеціальна конфігурація може бути надана плагіну, вказавши UglifyJsPluginпримірник:

const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new UglifyJsPlugin({
      include: /\.min\.js$/
    })]
  }
};

Це робить роботу для простого налаштування. Більш ефективне рішення - використовувати Gulp разом з Webpack і робити те саме за один прохід.


1
@FeloVilches Я навіть не згадую, що це робиться в webpack.config.js, але це передбачається, коли ми перебуваємо на землі Node.js і використовуємо Webpack.
колба Естуса

3
Хм, у вебпакет 4 я отримав:Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
право

3
Оновлення: тепер ви можете використовувати terser-webpack-plugin webpack.js.org/plugins/terser-webpack-plugin
ijse

156

Ви можете використовувати один конфігураційний файл і включати плагін 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


Редагувати:

Як зазначається в коментарях, NODE_ENVзазвичай використовується (за умовами) для визначення того, чи є певне середовище виробничим чи розвивальним середовищем. Щоб перевірити це, ви також можете встановити var PROD = (process.env.NODE_ENV === 'production')та продовжувати нормально.


6
У вузлі є одна змінна "за замовчуванням" для цього, вона називається NODE_ENV.
JCM

2
Чи не називається опція compressзамість minimize?
Слава Фомін II

1
Лише невелика готча: коли ви закликаєте webpack з аргументами, як- webpack -pот налаштування з webpack.optimize.UglifyJsPlugin у вашому конфігурації веб-пакету буде (принаймні частково) ігноровано (принаймні, налаштування mangle: falseігнорується).
Крістіан Ульбрих

2
Зауважте, що це створює одночасно лише один файл. Тому для того , щоб зробити цю роботу для питання повинен бути кілька проходів WebPack, webpack && webpack -p.
колба Естуса

1
Для тих, хто читає це, я б запропонував використовувати definePluginзамість цього, який, на мою думку, встановлений за замовчуванням у Webpack.
Бен Гублер

54

Ви можете запустити веб-пакет двічі з різними аргументами:

$ 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.config.js


2
Мені здається дуже простим рішенням; тільки те, що для webpack v3.5.5 він має вбудований перемикач під назвою --optimize-minimize або -p.
синергетика

Ідея крута, але не працює зараз, webpack кричить "Невідомий аргумент: мінімізувати" Рішення: використовуйте --env.minimize більше деталей за наступним посиланням github.com/webpack/webpack/isissue/2254
Жлі

Можна використовувати більш стандартний спосіб передати середовища вказівку в WebPack: stackoverflow.com/questions/44113359 / ...
MaMazav

40

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

Ви не отримаєте мінімізований і необроблений пакет з одного запуску або згенерувати інший набір пакетів, щоб -pпрапор не відповідав вашому випадку використання.

І навпаки, цей -dваріант короткий--debug --devtool sourcemap --output-pathinfo

Мій webpack.config.js опускає devtool, debug, pathinfoі minmize плагіна на користь цих двох прапорів.


Завдяки @ everett1992, це рішення чудово працює. Переважна більшість часу я запускаю розробку розробників, тоді, коли я закінчую, я використовую прапор -p, щоб виплюнути мінімізовану збірку виробництва. Не потрібно створювати два окремих конфігурації Webpack!
пмонт

36

Можливо, я запізнююсь тут, але у мене той самий випуск, тому я написав для цієї мети немініфікований веб-пакет .

Установка

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

Виконуючи вище, ви отримаєте два файли library.min.js і library.js. Не потрібно виконувати веб-пакет двічі, він просто працює! ^^


Здається, цей плагін не сумісний з SourceMapDevToolPlugin. Будь-які пропозиції щодо збереження вихідних карт?
BhavikUp

@BhavikUp, це не підтримується. Як ви думаєте, вам справді потрібна вихідна карта для виведення разом із кінцевим файлом js?
Говард

1
"Немає необхідності виконувати webpack двічі [...]" Приємно, але рішення estus також не вимагає "виконувати webpack двічі" та додатково не потребує додавання сторонніх плагінів.
Луї

@Howard Man, ти маєш рацію вчасно :). Принаймні, для мене. Дякую за чудовий плагін! Здається, ідеально працює з веб-пакетом 2 та опцією -p.
гапертон

34

На мою думку, набагато простіше просто використовувати інструмент UglifyJS безпосередньо:

  1. npm install --save-dev uglify-js
  2. Використовуйте веб-пакет як звичайно, наприклад, створення ./dst/bundle.jsфайлу.
  3. Додайте buildкоманду до свого package.json:

    "scripts": {
        "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map"
    }
  4. Щоразу, коли ви хочете створити свій пакет, а також невідомі код та вихідні карти, запустіть npm run buildкоманду.

Не потрібно встановлювати uglify-js в усьому світі, просто встановіть його локально для проекту.


так, це просте рішення, яке дозволяє будувати лише один раз
Фліон

15

Ви можете створити два конфігурації для вебпакету, той, який мінімізує код, і той, який не (просто видаліть рядок optimize.UglifyJSPlugin), а потім запустити обидві конфігурації одночасно. $ webpack && webpack --config webpack.config.min.js


2
Дякую, це працює чудово, але, звичайно, було б добре, якби було кращий спосіб зробити це, ніж підтримувати два файли конфігурації, враховуючи, що це такий звичайний випадок використання (майже про будь-яку збірку бібліотеки).
Рік Страль

12

Відповідно до цього рядка: 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.


Дякую за корисну відповідь на постарене, але якось все ще актуальне питання, Мауро ^ _ ^
Дякую

1
Не вдається знайти параметр minimizeу документах. Можливо, це застаріло?
adi518

@ adi518 Можливо, ви використовуєте більш нову версію плагіна, а не ту, яка входить у веб-пакет?
thexpand

4

webpack entry.jsx ./output.js -p

працює для мене, з -pпрапором.


4

Ви можете відформатувати свій webpack.config.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 }),
    ],
};'

А потім створити немініфікований запуск (у головному каталозі проекту):

$ webpack

Щоб створити його мінімізований запуск:

$ NODE_ENV=production webpack

Примітки. Переконайтеся, що для зміненої версії ви змінюєте ім'я вихідного файлу на library.jsта для мінімізованого, library.min.jsщоб вони не перезаписували один одного.


3

У мене було те саме питання, і я повинен був задовольнити всі ці вимоги:

  • Мінімізована + Нескорочена версія (як у питанні)
  • ES6
  • Кросова платформа (Windows + Linux).

Я нарешті вирішив це так:

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

Тоді я можу будувати (Не забудьте npm installраніше):

npm run-script build

Я отримав цю помилку ПОМИЛКА в невідомому: Невірне значення typeof
Kushal Jain

3

Я знайшов нове рішення цієї проблеми.

Для цього використовується масив конфігурації, щоб веб-пакет мав змогу паралельно створювати мінімізовану та неміфіковану версію. Це робить швидше нарощування. Не потрібно запускати веб-пакет двічі. Не потрібні додаткові плагіни. Просто веб-пакет.

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

Запуск webpackбуде створювати лише не змінену версію.

Біг webpack --env=productionбуде одночасно будувати мінімізовану та неміфіковану версію.


1

Вам слід експортувати такий масив:

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

0

Ви можете визначити дві точки входу у конфігурації веб-пакета, одну для звичайного js та іншу для мінімізованих js. Тоді вам слід вивести пакунок з його ім'ям і налаштувати плагін UglifyJS, щоб він включав файли min.js. Детальнішу інформацію див. У прикладі конфігурації веб-пакета:

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 ви отримаєте bundle.js та bundle.min.js у своїй папці dist, не потрібно додаткового плагіна.


застаріла експлікація
Олаф
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.