কীভাবে ওয়েবপ্যাক দিয়ে মিনিফায়েড এবং কমপ্রেসড বান্ডিল তৈরি করবেন?

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

যেহেতু ওয়েবপ্যাক 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$/
    })]
  }
};

এটি একটি সাধারণ সেটআপের জন্য কাজ করে। আরও কার্যকর সমাধান হ'ল গুলপকে ওয়েবপ্যাকের সাথে একত্রে ব্যবহার করা এবং একই পাসটি একই পাসে করা।

Comments

@ ফেলোভিচস আমি এমনকি এটি উল্লেখও করি না যে এটি ওয়েবপ্যাককনফিগ.জেজে করা হয়েছে, তবে এটি অনুমান করা হয় যে আমরা নোড.জেসের জমিতে এবং ওয়েবপ্যাক ব্যবহার করি once

— এস্তাস ফ্লাস্ক

হুম, ওয়েবপ্যাক ৪-এ আমি পেয়েছি:Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

— এনটাইটেল করুন

আপডেট: এখন আপনি টার্সার-ওয়েবপ্যাক-প্লাগইন ওয়েবপ্যাক.জেএস.আর.জি.আর

— প্লাগইনস /

Answer 2

আপনি একটি একক কনফিগারেশন ফাইল ব্যবহার করতে পারেন এবং পরিবেশ ভেরিয়েবল ব্যবহার করে শর্তাধীন UglifJS প্লাগইন অন্তর্ভুক্ত করতে পারেন:

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?

— স্লাভা ফমিন দ্বিতীয়

শুধু একটি ছোট gotcha হয়: আপনি যখন আর্গুমেন্ট সহ webpack মত কল webpack -pথেকে সেটিংস webpack.optimize.UglifyJsPlugin আপনার webpack কনফিগ মধ্যে হতে হবে (অন্তত আংশিকভাবে) উপেক্ষিত (অন্তত সেটিং mangle: falseউপেক্ষা করা হয়)।

— খ্রিস্টান উলব্রিচ

লক্ষ্য করুন যে এটি একবারে কেবল একটি ফাইল উত্পন্ন করে। প্রশ্নের এই কাজটি করার জন্য একাধিক ওয়েবপ্যাক পাস হওয়া উচিত 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

আমার কাছে খুব সহজ সমাধান বলে মনে হচ্ছে; ওয়েবপ্যাক v3.5.5 হিসাবে এটি বিল্ট-ইন স্যুইচ নামে --optimize-minimize বা -p নামে পরিচিত।

— synergetic

ধারণাটি দুর্দান্ত, তবে এখনই কাজ করছে না, ওয়েবপ্যাকটি চিত্কার করবে "অজানা যুক্তি: হ্রাস করুন" সমাধান: --env.minim নীচের লিঙ্কে আরও বিশদ বিবরণ করুন github.com/webpack/webpack/issues/2254

— Zhli

: Webpack পরিবেশ ইঙ্গিত পাস আরো আদর্শ উপায় ব্যবহার করতে পারি stackoverflow.com/questions/44113359/...

— MaMazav

Answer 4

অন্য উত্তর যুক্ত করতে, পতাকাটি -p(সংক্ষিপ্ত জন্য --optimize-minimize) ডিফল্ট আর্গুমেন্টের সাথে UglifJS সক্ষম করবে।

আপনি কোনও একক রানের বাইরে একটি সংশোধিত এবং কাঁচা বান্ডিল পাবেন না বা আলাদাভাবে নামকরণ করা বান্ডিল তৈরি করবেন -pনা যাতে পতাকাটি আপনার ব্যবহারের ক্ষেত্রে পূরণ না করে not

বিপরীতে -dবিকল্পের জন্য সংক্ষিপ্ত--debug --devtool sourcemap --output-pathinfo

আমার webpack.config.js বাদ devtool, debug, pathinfo, এবং minmize এই দুটি পতাকা পক্ষে প্লাগইন।

Comments

ধন্যবাদ @ ইভ্রেট ১৯৯২, এই সমাধানটি দুর্দান্ত কাজ করে। আমি ডেভ বিল্ডটি চালানোর সময়টির বেশিরভাগ অংশ, তারপরে আমি যখন সম্পন্ন করি তখন আমি একটি মিনিফাইড উত্পাদন বিল্ড আউট করার জন্য -p পতাকা ব্যবহার করি। দুটি পৃথক ওয়েবপ্যাক কনফিগার তৈরি করার দরকার নেই!

— pmont

Answer 5

হতে পারে আমি এখানে দেরিতে এসেছি, তবে আমার একই সমস্যা রয়েছে, তাই আমি এই উদ্দেশ্যে একটি অবিযুক্ত-ওয়েবপ্যাক-প্লাগইন লিখেছি wrote

স্থাপন

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

উপরের মত কাজ করে, আপনি দুটি ফাইল লাইব্রেরি.মিনি.জে এবং লাইব্রেরি.জেএস পাবেন। ওয়েবপ্যাক দু'বার কার্যকর করার দরকার নেই, এটি ঠিক কাজ করে! ^^

Comments

এই প্লাগইনটি SourceMapDevToolPlugin এর সাথে সামঞ্জস্যপূর্ণ বলে মনে হচ্ছে না। উত্স মানচিত্র ধরে রাখতে কোনও পরামর্শ?

— ভাভিকআপ

@ ভাভিকআপ, এটি সমর্থিত নয়। আপনি কি মনে করেন চূড়ান্ত জেএস ফাইলের সাথে আউটপুট দেওয়ার জন্য আপনার সত্যিকারের উত্স মানচিত্রের প্রয়োজন?

— হাওয়ার্ড

"ওয়েবপ্যাক দু'বার কার্যকর করার দরকার নেই [...]" দুর্দান্ত, তবে এস্টাসের সমাধানটিতে "দুইবার ওয়েবপ্যাক চালানো" দরকার হয় না এবং তৃতীয় পক্ষের প্লাগইন যুক্ত করার প্রয়োজন হয় না।

— লুই

@ হওয়ার্ড ম্যান, আপনি ঠিক সময়মতো :)। অন্তত আমার জন্য. দুর্দান্ত প্লাগ-ইন করার জন্য অনেক ধন্যবাদ! ওয়েবপ্যাক 2 এবং -পি বিকল্পের সাথে নিখুঁতভাবে কাজ করে বলে মনে হচ্ছে।

— গ্যাপারটন

Answer 6

আমার মতে কেবল ইউগ্লিফজেজেএস সরঞ্জামটি সরাসরি ব্যবহার করা অনেক সহজ :

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 ইনস্টল করার দরকার নেই, কেবলমাত্র প্রকল্পের জন্য এটি স্থানীয়ভাবে ইনস্টল করুন।

Comments

হ্যাঁ এটি একটি সহজ সমাধান যা আপনাকে কেবল একবারই তৈরি করতে দেয়

— ফ্লায়িয়ন

Answer 7

আপনি ওয়েবপ্যাকের জন্য দুটি কনফিগার তৈরি করতে পারেন, একটিটি কোডটি মিনিমাইফ করে এবং একটি (কেবলমাত্র অপ্টিমাইজ করে নাও g $ 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
    })
  ]
};

আপনার এনভিউ / আরজিভি কৌশল অনুসারে আপনি বিভিন্ন কনফিগার রফতানি করে একাধিক বিল্ড পেতে পারেন।

Comments

কোনও বয়স্ক-তবে-কোনওরকম-এখনও প্রাসঙ্গিক প্রশ্নে আপনার সহায়ক উত্তরের জন্য ধন্যবাদ, মাউরো ^ _ ^

— আপনাকে ধন্যবাদ

minimizeডক্সে বিকল্প খুঁজে পাচ্ছে না। সম্ভবত এটি অবহেলিত?

— adi518

@ adi518 হয়ত আপনি ওয়েবপ্যাকের মধ্যে বান্ডিলযুক্ত প্লাগইনটির একটি নতুন সংস্করণ ব্যবহার করছেন?

— এক্সপ্রেস

Answer 9

ওয়েবপ্যাক এন্ট্রি.জেএসএক্স। / আউটপুট.জেএস -পি

-pপতাকা আমার সাথে কাজ করে ।

Answer 10

আপনি আপনার ওয়েবপ্যাক.কমফিগ.জেগুলি এর মতো ফর্ম্যাট করতে পারেন:

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যাতে তারা একে অপরকে ওভাররাইট না করে।

Answer 11

আমার একই সমস্যা ছিল, এবং এই সমস্ত প্রয়োজনীয়তাগুলি পূরণ করতে হয়েছিল:

• Minified + নন মিনিফাইড সংস্করণ (প্রশ্ন হিসাবে)
• 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

আপনি আপনার ওয়েবপ্যাক কনফিগারেশনে দুটি এন্ট্রি পয়েন্ট নির্ধারণ করতে পারেন, একটি আপনার সাধারণ জেএসের জন্য এবং অন্যটি মিনিডেড জেএসের জন্য। তারপরে আপনার নামটি দিয়ে আপনার বান্ডেলটি আউটপুট করা উচিত এবং মিনি.জেএস ফাইলগুলি অন্তর্ভুক্ত করতে ইউগ্লিফাইজেএস প্লাগইনটি কনফিগার করা উচিত। আরও তথ্যের জন্য উদাহরণ ওয়েবপ্যাক কনফিগারেশন দেখুন:

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

ওয়েবপ্যাক চালানোর পরে, আপনি আপনার ডিস্ট ফোল্ডারে bundle.js এবং bundle.min.js পাবেন, অতিরিক্ত প্লাগইনের প্রয়োজন নেই।

Comments

অবহেলিত ব্যাখ্যা

— ওলাফ