web-dev-qa-db-ja.com

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も見たいです

javascriptnode.jswebpack
209
user633183

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 instanceを指定することでカスタム設定をプラグインに提供できます。

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

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

これは簡単な設定の仕事をします。もっと効果的な解決策は、GulpをWebpackと一緒に使用し、同じことを1回のパスで実行することです。

135
estus

単一の設定ファイルを使用し、環境変数を使用して条件付きで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')を設定して通常どおり続行することもできます。

153
lyosef

引数を変えて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());
}

...

example webpack.config.js

54
Gordon Freeman

別の答えを追加するために、フラグ-p（--optimize-minimizeの略）はデフォルト引数でUglifyJSを有効にします。

-pフラグがあなたのユースケースに合わないかもしれないので、あなたは一回の実行から縮小された生のバンドルを得たり、異なる名前のバンドルを生成したりしません。

逆に-dオプションは--debug--devtool sourcemap--output-pathinfoの省略形です

私のwebpack.config.jsはこれら2つのフラグのためにdevtool、debug、pathinfo、そしてminmizeプラグインを省略しています。

39
everett1992

多分私はここに遅れていますが、私は同じ問題を抱えているので、私は 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という2つのファイルが得られます。 webpackを2回実行する必要はありません、それだけで動作します！^^

36
Howard

私の意見では、 UglifyJS ツールを直接使うほうが簡単です lot ：

  1. npm install --save-dev uglify-js
  2. 通常どおりにwebpackを使用してください。 ./dst/bundle.jsファイルを構築します。

  3. package.jsonにbuildコマンドを追加します。

    "scripts": {
    "build": "webpack && uglifyjs ./dst/bundle.js -c -m -o ./dst/bundle.min.js --source-map ./dst/bundle.min.js.map"
}
  4. あなたのバンドルや、醜いコードやソースマップを作りたいときはいつでも、npm run buildコマンドを実行してください。

Uglify-jsをグローバルにインストールする必要はありません。プロジェクトのためにローカルにインストールするだけです。

33
Dave Kerr

Webpack用に2つの設定を作成することができます。1つはコードを縮小し、もう1つは縮小しないで（optimize.UglifyJSPlugin行を削除するだけです）、両方の設定を同時に実行します$ webpack && webpack --config webpack.config.min.js

15
trekforever

この行によると： 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戦略に従って異なる設定をエクスポートすることによって複数のビルドを持つことができます。

12
Ideabile

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の場合はそれらが互いに上書きされないように変更してください。

4
cnzac

webpack entry.jsx ./output.js -p

-pフラグを付けて私のために働きます。

4
gdfgdfg

私は同じ問題を抱えていました、そしてこれらすべての要件を満たさなければなりませんでした：

  • 縮小版+非縮小版（質問のように）
  • 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
3
MaMazav

次のような配列をエクスポートする必要があります。

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

私はこの問題に対する新しい解決策を見つけました。

これはwebpackが縮小版と非縮小版を並行して構築できるようにするために一連の設定を使用します。これによりビルドが速くなります。 Webpackを2回実行する必要はありません。追加のプラグインは必要ありません。ただウェブパック。

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を実行すると、縮小版と非縮小版が同時にビルドされます。

0
Rannie Aguilar Peralta