これが私の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.jsbundle.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 と一緒に使用して、同じことを 1 回のパスで行うことです。
異なる引数で webpack を 2 回実行できます。
$ 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());
}
...
別の回答を追加するには、フラグ-p( の略--optimize-minimize) を使用して UglifyJS をデフォルトの引数で有効にします。
1 回の実行で縮小された未加工のバンドルを取得したり、別の名前のバンドルを生成したりする-pことはできないため、フラグがユース ケースに合わない可能性があります。
逆に、-dオプションはの略です--debug --devtool sourcemap --output-pathinfo
私の webpack.config.js ではdevtool、、、、debugおよびpathinfominmize プラグインが省略され、これら 2 つのフラグが優先されます。
私の意見では、 UglifyJSツールを直接使用する方がはるかに簡単です。
npm install --save-dev uglify-js ./dst/bundle.jsます。buildにコマンドを追加しますpackage.json。
"scripts": {
"build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map"
}
npm run buildコマンドを実行してください。uglify-js をグローバルにインストールする必要はありません。プロジェクト用にローカルにインストールするだけです。
コードを縮小する構成とそうでない構成 (optimize.UglifyJSPlugin 行を削除するだけ) の 2 つの webpack 構成を作成し、両方の構成を同時に実行できます。$ webpack && webpack --config webpack.config.min.js
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上書きしないようにしてください。
次のように配列をエクスポートする必要があります。
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'),
];