จะสร้างมัดเล็กและไม่บีบอัดด้วย webpack ได้อย่างไร

นี่ฉัน 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

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 และทำสิ่งเดียวกันในครั้งเดียว

คุณสามารถใช้ไฟล์กำหนดค่าเดียวและรวมถึงปลั๊กอิน 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')และดำเนินการตามปกติ

คุณสามารถเรียกใช้ webpack สองครั้งด้วยอาร์กิวเมนต์ที่ต่างกัน:

$ 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

หากต้องการเพิ่มคำตอบอื่นการตั้งค่าสถานะ-p(ย่อมาจาก--optimize-minimize) จะเปิดใช้งาน UglifyJS พร้อมอาร์กิวเมนต์เริ่มต้น

คุณจะไม่ได้รับชุดย่อและแบบดิบจากการเรียกใช้ครั้งเดียวหรือสร้างชุดรวมที่มีชื่อแตกต่างกันดังนั้นการ-pตั้งค่าสถานะอาจไม่ตรงกับกรณีการใช้งานของคุณ

ในทางกลับกัน-dตัวเลือกนั้นสั้น--debug --devtool sourcemap --output-pathinfo

ฉัน webpack.config.js ละเว้นdevtool, debug, pathinfoและปลั๊กอิน minmize ในความโปรดปรานของทั้งสองธง

บางทีฉันอาจจะมาสาย แต่ฉันมีปัญหาเดียวกันดังนั้นฉันจึงเขียนปลั๊กอินเว็บแพ็คสำหรับจุดประสงค์นี้โดยไม่ระบุชื่อ

การติดตั้ง

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 ไม่จำเป็นต้องเรียกใช้ webpack สองครั้งมันใช้ได้แค่ ^^

ในความคิดของฉันมันง่ายมากที่จะใช้เครื่องมือUglifyJSโดยตรง:

1. npm install --save-dev uglify-js
2. ใช้ webpack ตามปกติเช่นสร้าง./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. เมื่อใดก็ตามที่คุณต้องการสร้างบันเดิลของคุณรวมถึง uglified code และ sourcemaps ให้รันnpm run buildคำสั่ง

ไม่จำเป็นต้องติดตั้ง uglify-js ทั่วโลกเพียงติดตั้งในเครื่องสำหรับโครงการ

คุณสามารถสร้างการกำหนดค่าสองแบบสำหรับ webpack ซึ่งเป็นรหัสที่ลดขนาดและอีกอันที่ไม่ได้ (เพียงลบการเพิ่มประสิทธิภาพบรรทัด JUglifyJSPlugin) จากนั้นเรียกใช้การกำหนดค่าทั้งสองในเวลาเดียวกัน $ webpack && webpack --config webpack.config.min.js

ตามด้วยบรรทัดนี้: 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 ของคุณ

webpack entry.jsx ./output.js -p

ใช้ได้กับฉันด้วย-pธง

คุณสามารถจัดรูปแบบ 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เพื่อไม่ให้เขียนทับกัน

ฉันมีปัญหาเดียวกันและต้องปฏิบัติตามข้อกำหนดเหล่านี้ทั้งหมด:

• รุ่นย่อส่วน + ไม่ใช่รุ่นย่อ (ตามคำถาม)
• 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

ฉันพบวิธีแก้ไขปัญหาใหม่สำหรับปัญหานี้

สิ่งนี้ใช้อาร์เรย์ของการกำหนดค่าเพื่อเปิดใช้งาน webpack เพื่อสร้างเวอร์ชันที่ย่อและไม่ย่อเล็กแบบคู่ขนาน ทำให้การสร้างเร็วขึ้น ไม่จำเป็นต้องเรียกใช้ 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;
  }
};

การรันwebpackจะสร้างเวอร์ชั่นที่ไม่ย่อเล็กสุดเท่านั้น

การรันwebpack --env=productionจะสร้างเวอร์ชันที่ย่อและไม่ย่อเล็กสุดในเวลาเดียวกัน

คุณควรส่งออกอาร์เรย์ดังนี้:

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 ของคุณหนึ่งจุดสำหรับ js ปกติของคุณและอีกจุดหนึ่งสำหรับ minified js จากนั้นคุณควรเอาท์พุทบันเดิลของคุณด้วยชื่อและกำหนดค่าปลั๊กอิน UglifyJS เพื่อรวมไฟล์ min.js ดูตัวอย่างการกำหนดค่า webpack สำหรับรายละเอียดเพิ่มเติม:

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 ของคุณโดยไม่จำเป็นต้องใช้ปลั๊กอินเพิ่มเติม