Bagaimana cara membangun bundel yang diperkecil dan tidak terkompresi dengan webpack?

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

Saya membangun dengan

$ webpack

Di distfolder saya , saya hanya mendapatkan

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

Saya juga ingin melihat yang tidak terkompresi 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
    })
  ]
};

Sejak Webpack 4, webpack.optimize.UglifyJsPlugintelah ditinggalkan dan penggunaannya menghasilkan kesalahan:

webpack.optimize.UglifyJsPlugin telah dihapus, silakan gunakan config.optimization.minimize sebagai gantinya

Seperti yang dijelaskan manual , plugin dapat diganti dengan minimizeopsi. Konfigurasi khusus dapat disediakan untuk plugin dengan menentukan UglifyJsPlugincontoh:

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

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

Ini melakukan pekerjaan untuk pengaturan yang sederhana. Solusi yang lebih efektif adalah dengan menggunakan Gulp bersama-sama dengan Webpack dan melakukan hal yang sama dalam satu pass.

Anda dapat menggunakan file konfigurasi tunggal, dan menyertakan plugin UglifyJS dengan menggunakan variabel lingkungan:

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

dan kemudian setel variabel ini saat Anda ingin memperkecilnya:

$ PROD_ENV=1 webpack

Edit:

Seperti disebutkan dalam komentar, NODE_ENVumumnya digunakan (dengan konvensi) untuk menyatakan apakah lingkungan tertentu adalah produksi atau lingkungan pengembangan. Untuk memeriksanya, Anda juga dapat mengatur var PROD = (process.env.NODE_ENV === 'production'), dan melanjutkan secara normal.

Anda dapat menjalankan webpack dua kali dengan berbagai argumen:

$ webpack --minimize

kemudian periksa argumen baris perintah di 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());
}

...

contoh webpack.config.js

Untuk menambahkan jawaban lain, flag -p(kependekan dari --optimize-minimize) akan mengaktifkan UglifyJS dengan argumen default.

Anda tidak akan mendapatkan bundel yang diperkecil dan mentah dari sekali proses atau menghasilkan bundel dengan nama yang berbeda sehingga -pbendera mungkin tidak memenuhi use case Anda.

Sebaliknya -dpilihannya adalah kependekan dari--debug --devtool sourcemap --output-pathinfo

Webpack.config.js saya menghilangkan devtool, debug, pathinfo, dan minmize Plugin mendukung dua bendera ini.

Mungkin saya terlambat ke sini, tetapi saya memiliki masalah yang sama, jadi saya menulis plugin-webpack-unminified untuk tujuan ini.

Instalasi

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

Pemakaian

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

Dengan melakukan seperti di atas, Anda akan mendapatkan dua file library.min.js dan library.js. Tidak perlu menjalankan webpack dua kali, itu hanya berfungsi! ^^

Menurut pendapat saya, jauh lebih mudah menggunakan alat UglifyJS secara langsung:

1. npm install --save-dev uglify-js
2. Gunakan webpack seperti biasa, misalnya membuat ./dst/bundle.jsfile.

3. Tambahkan buildperintah ke package.json:

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

4. Setiap kali Anda ingin membangun bundel Anda serta kode dan sourcemaps yang di-uglified, jalankan npm run buildperintah.

Tidak perlu menginstal uglify-js secara global, cukup instal secara lokal untuk proyek tersebut.

Anda dapat membuat dua konfigurasi untuk webpack, satu yang mengecilkan kode dan yang tidak (cukup hapus baris optim.UglifyJSPlugin) dan kemudian jalankan kedua konfigurasi pada saat yang sama $ webpack && webpack --config webpack.config.min.js

Menurut dengan baris ini: https://github.com/pingyuanChen/webpack-uglify-js-plugin/blob/master/index.js#L117

harus seperti:

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

Memang Anda dapat memiliki beberapa build dengan mengekspor konfigurasi yang berbeda sesuai dengan strategi env / argv Anda.

webpack entry.jsx ./output.js -p

bekerja untuk saya, dengan -pbendera.

Anda dapat memformat webpack.config.js Anda seperti ini:

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

Dan kemudian untuk membangunnya jalankan tanpaminminasi (saat berada di direktori utama proyek):

$ webpack

Untuk membangunnya, proses minimal:

$ NODE_ENV=production webpack

Catatan: Pastikan bahwa untuk versi yang tidak diubah Anda mengubah nama file output menjadi library.jsdan untuk yang diperkecil library.min.jssehingga mereka tidak saling menimpa.

Saya memiliki masalah yang sama, dan harus memenuhi semua persyaratan ini:

• Versi Minified + Non minified (seperti dalam pertanyaan)
• ES6
• Lintas platform (Windows + Linux).

Saya akhirnya menyelesaikannya sebagai berikut:

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

Maka saya dapat membangun dengan (Jangan lupa npm installsebelumnya):

npm run-script build

Saya menemukan solusi baru untuk masalah ini.

Ini menggunakan array konfigurasi untuk memungkinkan webpack untuk membangun versi minified dan non-minified secara paralel. Ini membuat build lebih cepat. Tidak perlu menjalankan paket web dua kali. Tidak perlu plugin tambahan. Hanya paket web.

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

Menjalankan webpackhanya akan membangun versi non-minified.

Menjalankan webpack --env=productionakan membangun versi yang diperkecil dan tidak-diperkecil pada saat yang sama.

Anda harus mengekspor array seperti ini:

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

Anda dapat menetapkan dua titik masuk dalam konfigurasi paket web Anda, satu untuk js normal dan yang lainnya untuk js yang diperkecil. Maka Anda harus mengeluarkan bundel Anda dengan namanya, dan mengonfigurasi plugin UglifyJS untuk menyertakan file min.js. Lihat contoh konfigurasi webpack untuk detail lebih lanjut:

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

Setelah menjalankan webpack, Anda akan mendapatkan bundle.js dan bundle.min.js di folder dist Anda, tidak perlu plugin tambahan.