☰

webpack で縮小および非圧縮バンドルをビルドする方法は? 質問する

tag-icon • tag-icon javascript node.js webpack
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

ベストアンサー1

webpack.config : : を記述します。

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 回のパスで実行することです。

おすすめ記事