[解決済み】webpackでminifiedとuncompressedバンドルを構築する方法は？

質問

ここで、私の 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を一緒に使って、同じことを一回で行うことです。