如何使用webpack構建縮小的和未壓縮的包？

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

它可以完成簡單的設置。更有效的解決方案是將Gulp和Webpack一起使用，並且一次完成相同的事情。

Answer 2

您可以創建兩個CONFIGS爲的WebPack，一個minifies代碼和一個不（只是刪除optimize.UglifyJSPlugin線），然後同時運行同時配置$ webpack && webpack --config webpack.config.min.js

Answer 3

您可以使用一個配置文件，包括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')，並繼續正常。

Answer 4

要添加另一個答案，標記-p（--optimize-minimize的簡稱）將啓用具有默認參數的UglifyJS。

您不會從單次運行中獲得縮小的原始包或生成不同名稱的包，因此-p標誌可能不符合您的使用案例。

相反的-d選項是短期的--debug--devtool sourcemap--output-pathinfo

我webpack.config.js省略devtool，debug，pathinfo，並有利於這兩個標誌的minmize插件。

Answer 5

你可以用不同的參數運行的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

Answer 6

也許我遲到了這裏，但我有同樣的問題，所以我寫了一個unminified-webpack-plugin用於這一目的。

安裝

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兩次，它只是工作^^

Answer 7

在我看來這是一個很多容易只是直接使用的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. 每當你想建立一個你的包，以及變醜代碼和sourcemaps，運行npm run build命令。

無需全局安裝uglify-js，只需在本地爲項目安裝。

Answer 8

的WebPack entry.jsx ./output.js -p

作品對我來說，與-p標誌。

Answer 9

您可以格式化你的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 }), 
    ], 
};' 

然後建立它unminified運行（而在項目的主目錄）：

$ webpack 

構建它精縮運行：

$ NODE_ENV=production webpack 

評論： 請確保對於無語的版本ñ您將輸出文件名更改爲library.js並將縮小的library.min.js更改爲不覆蓋對方。

Answer 10

這一行根據：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的戰略出口不同CONFIGS。

Answer 11

您可以在webpack配置中定義兩個入口點，一個用於正常的js，另一個用於縮小的js。然後你應該輸出你的bundle的名字，並配置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文件夾中，無需額外的插件。

Answer 12

我有同樣的問題，而不得不滿足所有這些要求：

• 精縮+非精縮版（如題）
• 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