वेबपैक के साथ छोटा और असम्पीडित बंडल कैसे बनाएं?

Question

ये रहा मेरा 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

Answer 1

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.min का उपयोग करें बजाय इसके

जैसा कि मैनुअल बताता है, प्लगइन को minimizeविकल्प से बदला जा सकता है । कस्टम कॉन्फ़िगरेशन UglifyJsPluginउदाहरण को निर्दिष्ट करके प्लगइन को प्रदान किया जा सकता है :

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

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

यह एक साधारण सेटअप के लिए काम करता है। एक और अधिक प्रभावी उपाय है, वेबपैक के साथ एक साथ गुल का उपयोग करना और एक ही पास में एक ही काम करना।

Comments

@FeloVilches मैंने यह भी उल्लेख नहीं किया है कि यह webpack.config.js में किया गया है, लेकिन यह माना जाता है कि जब हम Node.js भूमि में होते हैं और वेबपैक का उपयोग करते हैं।

— एस्टुस फ्लास्क

हम्म, Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

— वेबपैक

अपडेट: अब आप terser-webpack-plugin webpack.js.org/plugins/terser-webpack-plugin

— ijse

Answer 2

आप एक एकल फ़ाइल का उपयोग कर सकते हैं, और एक पर्यावरण चर का उपयोग करके सशर्त रूप से 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'), और सामान्य रूप से जारी रख सकते हैं ।

Comments

नोड के पास इसके लिए एक "डिफ़ॉल्ट" चर है, इसे NODE_ENV कहा जाता है।

— जेसीएम

के compressबजाय विकल्प नहीं कहा जाता है minimize?

— स्लाव फोमिन II

बस एक छोटा सा गोचा: जब आप वेबपैक को तर्कों के साथ कहते हैं, जैसे webpack.optimize.UglifyJsPluginwebpack -p से सेटिंग्स आपके वेबपैक में होगी (कम से कम आंशिक रूप से) तो कम से कम mangle: falseअनदेखा किया गया है।

— क्रिश्चियन उलब्रिच

ध्यान दें कि यह एक समय में केवल एक फ़ाइल उत्पन्न करता है। तो क्रम प्रश्न के लिए यह काम करने के लिए वहाँ, कई Webpack गुजरता होना चाहिए webpack && webpack -p।

— एस्टुस फ्लास्क

इसे पढ़ने वाले किसी के लिए, मैं definePluginइसके बजाय का उपयोग करने का सुझाव दूंगा, जो मुझे लगता है कि वेबपैक के साथ डिफ़ॉल्ट रूप से स्थापित है।

— बेन गुबलर

Answer 3

आप अलग-अलग तर्कों के साथ दो बार वेबपैक चला सकते हैं:

$ 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

Comments

मेरे लिए बहुत सरल उपाय लगता है; बस के रूप में है कि webpack v3.5.5 के रूप में इसे बनाया गया है स्विच --optimize- न्यूनतम या -p।

— synergetic

यह विचार ठंडा है, लेकिन अब काम नहीं कर रहा है, वेबपैक "अज्ञात तर्क: को कम करेगा" समाधान: "--vv.minmin" को निम्नलिखित लिंक github.com/webpack/webpack/issues/2254

— Zhue

— वेबपैक

Answer 4

एक और उत्तर जोड़ने के लिए, ध्वज -p(छोटा --optimize-minimize) डिफ़ॉल्ट तर्क के साथ UglifyJS को सक्षम करेगा।

आपको एक एकल रन से एक छोटा और कच्चा बंडल नहीं मिलेगा या अलग-अलग नाम वाले बंडल बनाएंगे ताकि -pझंडा आपके उपयोग के मामले को पूरा न कर सके।

इसके विपरीत -dविकल्प कम है--debug --devtool sourcemap --output-pathinfo

मेरे webpack.config.js को छोड़ देता है devtool, debug, pathinfo, और minmize इन दो झंडे के पक्ष में प्लगइन।

Comments

धन्यवाद @ everett1992, यह समाधान महान काम करता है। जब मैं देव बिल्ड को चलाता हूं, तब अधिकांश समय मैं पी-फ्लैग का उपयोग करने के लिए एक मिनीकृत उत्पादन निर्माण के लिए करता हूं। दो अलग वेबपैक कॉन्फिगर बनाने की आवश्यकता नहीं है!

— शाम ०१:१६

Answer 5

हो सकता है कि मैं यहां देर से आया हूं, लेकिन मेरे पास एक ही मुद्दा है, इसलिए मैंने इस उद्देश्य के लिए एक अज्ञात-वेबपैक-प्लगइन लिखा है ।

स्थापना

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

जैसा कि ऊपर किया गया है, आपको दो फाइलें लाइब्रेरी .min.js और Library.js मिलेंगी। वेबपैक को दो बार निष्पादित करने की आवश्यकता नहीं है, यह सिर्फ काम करता है! ^ ^

Comments

यह प्लगइन SourceMapDevToolPlugin के साथ संगत नहीं लगता है। स्रोत मानचित्र बनाए रखने के लिए कोई सुझाव?

— भाविकउप

@ भाविकअप, यह समर्थित नहीं है। क्या आपको लगता है कि अंतिम जेएस फ़ाइल के साथ आउटपुट के लिए आपको वास्तव में सोर्स मैप की आवश्यकता है?

— हावर्ड

"वेबपैक को दो बार निष्पादित करने की आवश्यकता नहीं है [...]" अच्छा है, लेकिन एस्टस के समाधान के लिए भी "दो बार वेबपैक निष्पादित करने की आवश्यकता नहीं है" और इसके अलावा तीसरे पक्ष के प्लगइन को जोड़ने की आवश्यकता नहीं है।

— लुई

@ हॉवर्ड मैन, आप समय पर सही हैं :)। कम से कम मेरे लिए। महान प्लग-इन के लिए बहुत बहुत धन्यवाद! Webpack 2 और -p विकल्प के साथ पूरी तरह से काम करने लगता है।

— गैपर्टन

Answer 6

मेरे विचार में सीधे 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कमांड चलाएं ।

दुनिया भर में बदसूरत-जेएस स्थापित करने की आवश्यकता नहीं है, बस इसे परियोजना के लिए स्थानीय रूप से स्थापित करें।

Comments

हाँ यह एक आसान समाधान है जो आपको केवल एक बार निर्माण करने की अनुमति देता है

— फ्लायन

Answer 7

आप वेबपैक के लिए दो कॉन्फिगरेशन बना सकते हैं, एक जो कोड को मिनिमाइज करता है और एक (जो केवल ऑप्टिमाइज़ को हटाता है। UglifyJSPlugin लाइन) और फिर उसी समय दोनों कॉन्फिगरेशन को रन करता है। $ webpack && webpack --config webpack.config.min.js

Comments

धन्यवाद, यह बहुत अच्छा काम करता है, लेकिन यह सुनिश्चित करना अच्छा होगा यदि ऐसा करने का एक बेहतर तरीका दो कॉन्फिग फाइलों को बनाए रखने से है कि यह इस तरह का एक सामान्य उपयोग मामला है (बस किसी भी लाइब्रेरी बिल्ड के बारे में)।

— रिक स्ट्राल

Answer 8

इस लाइन के अनुसार: 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 रणनीतियों के अनुसार अलग-अलग कॉन्फ़िगरेशन निर्यात करके कई बिल्ड कर सकते हैं।

Comments

वृद्ध-लेकिन-किसी भी तरह से प्रासंगिक प्रश्न पर आपके उपयोगी उत्तर के लिए धन्यवाद, Mauro ^ _ ^

— धन्यवाद

minimizeडॉक्स में विकल्प नहीं खोज सकते । शायद यह पदावनत है?

— एडी ५१ ad

@ adi518 हो सकता है कि आप प्लगइन के नए संस्करण का उपयोग कर रहे हों और वेबपैक के भीतर बंडल न हो?

— Thexpand

Answer 9

webpack entry.jsx ./output.js -p

मेरे लिए, -pध्वज के साथ काम करता है ।

Answer 10

आप अपने 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.jsminified के लिए करते हैं library.min.jsताकि वे एक-दूसरे को अधिलेखित न करें।

Answer 11

मेरे पास एक ही मुद्दा था, और इन सभी आवश्यकताओं को पूरा करना था:

• न्यूनतम + गैर मिनीकृत संस्करण (प्रश्न के अनुसार)
• ES6
• क्रॉस प्लेटफॉर्म (विंडोज + लिनक्स)।

मैंने अंत में इसे इस प्रकार हल किया:

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

Comments

मुझे यह त्रुटि ERROR में अज्ञात में मिली: अमान्य टाइपोफ़ मूल्य

— कुशाल जैन

Answer 12

मुझे इस समस्या का एक नया समाधान मिला।

यह वेबपैक को समानांतर में मिनीकृत और गैर-छोटा संस्करण बनाने में सक्षम करने के लिए कॉन्फ़िगरेशन की एक सरणी का उपयोग करता है। यह तेजी से निर्माण करते हैं। वेबपैक को दो बार चलाने की आवश्यकता नहीं है। अतिरिक्त प्लगइन्स की आवश्यकता नहीं है। सिर्फ वेबपैक।

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एक ही समय में लघु और गैर-छोटा संस्करण बनाएगी।

Answer 13

आपको इस तरह एक सरणी निर्यात करना चाहिए:

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

Answer 14

आप अपने वेबपैक कॉन्फ़िगरेशन में दो एंट्री पॉइंट्स को परिभाषित कर सकते हैं, एक आपके सामान्य js के लिए और दूसरा मिनिफाइज्ड js के लिए। फिर आपको अपने बंडल को उसके नाम के साथ आउटपुट करना चाहिए, और min.js फ़ाइलों को शामिल करने के लिए UglifyJS प्लगइन को कॉन्फ़िगर करना चाहिए। अधिक विवरण के लिए उदाहरण वेबपैक कॉन्फ़िगरेशन देखें:

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

वेबपैक चलाने के बाद, आपको अपने डिस्टल फ़ोल्डर में बंडल.जेएस और बंडल.मिन.जेएस मिलेंगे, अतिरिक्त प्लगइन की कोई आवश्यकता नहीं है।

Comments

पदावनत खोज

— ओलाफ