Webpack Dev Server で minified と uncompressed バンドルを開発・デバッグする

Webpack で minified と uncompressed バンドルを生成する方法

このチュートリアルでは、Webpack を使用して minified および uncompressed バンドルを同時に生成する方法を説明します。

手順

module.exports = {
  mode: 'production',
  optimization: {
    minimize: false,
  },
  output: {
    filename: 'bundle.js',
    library: {
      type: 'umd',
      name: 'MyLibrary',
      export: 'default',
    },
  },
};

1. 以下のコマンドを実行して、バンドルを生成します。

npx webpack

このコマンドを実行すると、bundle.js および bundle.min.js という 2 つのファイルが生成されます。bundle.js は uncompressed バンドルであり、bundle.min.js は minified バンドルです。

詳細

上記の構成では、mode プロパティを 'production' に設定することで、Webpack が本番環境向けのバンドルを生成するように指示しています。

optimization.minimize プロパティを false に設定することで、Webpack がコードを minify しないように指示しています。

output.library プロパティを使用して、UMD (Universal Module Definition) 形式のバンドルを生成するように指示しています。これにより、バンドルを CommonJS、ES Modules、および AMD モジュールとして使用できます。

• Webpack には、さまざまな minifier プラグインが用意されています。これらのプラグインを使用して、コードを minify することができます。
• ソースマップを生成して、minified コードをデバッグできるようにすることもできます。

// サンプル JavaScript コード
function helloWorld() {
  console.log('Hello, World!');
}

helloWorld();

Node.js

// サンプル Node.js コード
const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, World!');
});

server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Webpack

// サンプル Webpack 設定
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

これらのコードはあくまでもサンプルであり、実際のプロジェクトで使用するには調整が必要になる場合があります。

• コードの動作を理解したい場合は、説明を求めてください。
• コードの改善方法に関する提案が必要な場合は、喜んでお手伝いさせていただきます。

NODE_ENV=production npx webpack

このコマンドを実行すると、bundle.min.js というファイルのみが生成されます。

Webpack CLI オプションを使用する

Webpack CLI には、--minify オプションを使用して minified バンドルを生成し、--no-minify オプションを使用して uncompressed バンドルを生成するオプションがあります。

npx webpack --minify
npx webpack --no-minify

これらのコマンドを実行すると、それぞれ bundle.min.js および bundle.js というファイルのみが生成されます。

Webpack 設定ファイルで output.publicPath を使用する

Webpack 設定ファイルで output.publicPath プロパティを設定することで、minified と uncompressed バンドルを異なるディレクトリに生成することができます。

module.exports = {
  mode: 'production',
  optimization: {
    minimize: false,
  },
  output: {
    filename: '[name].js',
    publicPath: 'dist/',
  },
};

この設定の場合、Webpack は dist/bundle.js および dist/bundle.min.js という 2 つのファイルにバンドルを生成します。

Webpack プラグインを使用する

Webpack には、minified と uncompressed バンドルを生成するのに役立つさまざまなプラグインが用意されています。

これらのプラグインは、Webpack 設定ファイルにインストールして追加できます。

Webpack Dev Server を使用する

Webpack Dev Server は、開発環境で Webpack を実行するためのツールです。このツールには、minified と uncompressed バンドルを生成するオプションがあります。

npx webpack-dev-server --env.production --minify
npx webpack-dev-server --env.production --no-minify