Web paketi ile küçültülmüş ve sıkıştırılmamış paket nasıl oluşturulur?

İşte benim 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})
  ]
};

İle inşa ediyorum

$ webpack

Benim içinde distklasörün, sadece alıyorum

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

Sıkıştırılmamışları da görmek isterim bundle.js

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.UglifyJsPluginkullanımdan kaldırıldığından ve kullanımı hataya neden olduğundan:

webpack.optimize.UglifyJsPlugin kaldırıldı, lütfen config.optimization.minimize komutunu kullanın

Gibi manuel açıklıyor, eklenti ile değiştirilebilir minimizeseçenek. Özel yapılandırma, UglifyJsPluginörnek belirtilerek eklentiye sağlanabilir :

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

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

Bu, basit bir kurulum için işi yapar. Daha etkili bir çözüm Gulp'i Webpack ile birlikte kullanmak ve aynı şeyi bir geçişte yapmaktır.

Tek bir yapılandırma dosyası kullanabilir ve bir ortam değişkeni kullanarak UglifyJS eklentisini koşullu olarak ekleyebilirsiniz:

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

ve daha sonra küçültmek istediğinizde bu değişkeni ayarlayın:

$ PROD_ENV=1 webpack

Düzenle:

Yorumlarda belirtildiği gibi NODE_ENV, genellikle (sözleşmeyle) belirli bir ortamın bir üretim veya geliştirme ortamı olup olmadığını belirtmek için kullanılır. Kontrol etmek için ayrıca ayarlayabilir var PROD = (process.env.NODE_ENV === 'production')ve normal şekilde devam edebilirsiniz .

Web paketini farklı argümanlarla iki kez çalıştırabilirsiniz:

$ webpack --minimize

ardından komut satırı bağımsız değişkenlerini kontrol edin 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());
}

...

örnek webpack.config.js

Başka bir cevap eklemek için bayrak -p(--optimize-minimize ) UglifyJS'yi varsayılan bağımsız değişkenlerle etkinleştirir.

Küçültülmüş ve ham bir paketi tek bir çalışmadan elde -pedemez veya farklı adlandırılmış paketler oluşturamazsınız, böylece bayrak kullanım durumunuzu karşılamayabilir.

Tersine, -dseçenek kısa--debug --devtool sourcemap --output-pathinfo

Benim webpack.config.js atlar devtool, debug, pathinfove bu iki bayrakların lehine eklentisi asgaride tutacak.

Belki burada geç kaldım , ama aynı sorun var, bu yüzden bu amaçla bir web-eklenti yazmadım .

Kurulum

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

kullanım

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

Yukarıdaki gibi yaparak, iki dosya library.min.js ve library.js dosyası alırsınız. Gerek webpack iki kez yürütmek gerek, sadece çalışıyor! ^^

Bence sadece UglifyJS aracını doğrudan kullanmak çok daha kolay :

1. npm install --save-dev uglify-js
2. Web paketini normal olarak kullanın, örneğin bir ./dst/bundle.jsdosya oluşturmak.

3. Bir buildkomut ekleyin 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 code ve sourcemaps yanı sıra bir paket oluşturmak istediğinizde, npm run buildkomutu çalıştırın .

Küresel olarak uglify-js kurmaya gerek yok, sadece proje için yerel olarak kurun.

Web paketi için biri kodu küçülten ve diğeri (yalnızca optimize et.UglifyJSPlugin satırını kaldırın) olmayan iki yapılandırma oluşturabilir ve ardından her iki yapılandırmayı aynı anda çalıştırabilirsiniz. $ webpack && webpack --config webpack.config.min.js

Bu hatta göre: https://github.com/pingyuanChen/webpack-uglify-js-plugin/blob/master/index.js#L117

şöyle bir şey olmalı:

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

Gerçekten de env / argv stratejilerinize göre farklı konfigürasyonları dışa aktararak birden fazla yapıya sahip olabilirsiniz.

webpack entry.jsx ./output.js -p

-pbayraklı benim için çalışıyor .

Webpack.config.js dosyanızı şu şekilde biçimlendirebilirsiniz:

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

Ve sonra onu, projenin ana dizinindeyken sonlandırılmamış çalıştırmak için inşa etmek:

$ webpack

Minimize edilmiş çalışma oluşturmak için:

$ NODE_ENV=production webpack

Notlar: Sonlandırılmamış sürüm için çıktı dosyasının adını library.js, küçültülmüş olarak ve küçültülmüş olarak değiştirdiğinizden emin olun, library.min.jsböylece birbirlerinin üzerine yazmazlar .

Aynı sorunu yaşadım ve tüm bu gereksinimleri karşılamak zorunda kaldım:

• Küçültülmüş + Küçültülmemiş sürüm (sorudaki gibi)
• ES6
• Çapraz platform (Windows + Linux).

Sonunda şu şekilde çözdüm:

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

Sonra inşa edebilirim (Daha npm installönce unutmayın ):

npm run-script build

Bu sorun için yeni bir çözüm buldum.

Web paketinin küçültülmüş ve küçültülmemiş sürümü paralel olarak oluşturmasını sağlamak için bir yapılandırma dizisi kullanır. Bu, yapıyı daha hızlı hale getirir. Web paketini iki kez çalıştırmanıza gerek yoktur. Eklentilere gerek yok. Sadece webpack.

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

Çalıştırma webpackyalnızca küçültülmemiş sürümü oluşturur.

Running webpack --env=production, küçültülmüş ve küçültülmemiş sürümü aynı anda oluşturur.

Bunun gibi bir diziyi dışa aktarmalısınız:

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

Webpack yapılandırmanızda biri normal js, diğeri minimize js için olmak üzere iki giriş noktası tanımlayabilirsiniz. Daha sonra paketinizi adıyla çıkarmalı ve UglifyJS eklentisini min.js dosyalarını içerecek şekilde yapılandırmalısınız. Daha fazla ayrıntı için örnek web paketi yapılandırmasına bakın:

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'i çalıştırdıktan sonra, dağıtım klasörünüzde bundle.js ve bundle.min.js dosyasını alacaksınız, ekstra eklentiye gerek yok.