webpack で JavaScript と CSS を minify する単純な例

このページでは、webpack (4系) で JavaScript と CSS を minify する例を説明します。追加で SCSS と Babel の設定例も記載します。

前提

この手順で前提としているライブラリとバージョンは下記のとおりです。

ライブラリ	バージョン
node	12.10.0
npm	6.9.0
webpack	4.40.2
webpack-cli	3.3.9
css-loader	3.2.0
mini-css-extract-plugin	0.8.0
optimize-css-assets-webpack-plugin	5.0.3

JavaScript と CSS を minify する手順

1. 作業フォルダ上で npm init -y コマンドを実行して package.json を生成します。

2. 作業フォルダ上で npm install --save-dev webpack webpack-cli css-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin コマンドを実行して必要なライブラリを導入します。

css-loader は JavaScript 上で CSS を require や import できるようにするものです。
mini-css-extract-plugin は CSS の内容を JavaScript とは別ファイルにビルドするものです。
optimize-css-assets-webpack-plugin は CSS を minify するためのものです。

3. 作業フォルダ直下に webpack.config.js ファイルを作成し、下記のような内容を記載します。

const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry: './src/index.js', // 入力元のファイル名(エントリポイント)
  output: {
    path: __dirname + '/static/dist',
    filename: 'bundle.js'// JavaScript の出力先のファイル名 (static/dist/bundle.js)
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "bundle.css" // CSS の出力先のファイル名 (static/dist/bundle.css に出力)
    })
  ],
  module: {
    rules: [
      { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader }, 'css-loader' ] },
    ]
  },
  optimization: {
    minimizer: [
      new TerserPlugin(), // JavaScript の minify を行う
      new OptimizeCSSAssetsPlugin() // CSS の minify を行う
    ]
  }
}

※入力元、出力先のファイル名は必要に応じて変更してください。

4. エントリファイル上で、必要な CSS ファイルを import します。

// src/index.js
import './xxx.css'; // CSSのインポート

5. npx webpack コマンドで、出力先ファイル(前述の webpack.config.js の output。今回の例だと static/dist/bundle.js。CSS は static/dist/bundle.css)にファイルが生成されるか確認します。

問題なければ完了です。

[任意] SCSS を使用する手順

SCSS を読み込めるようにする場合は、上記に加えて下記を行います。

1. npm install --save-dev node-sass sass-loader コマンドを実行して必要なライブラリを導入します。

ライブラリ	記載時点のバージョン
node-sass	4.11.0
sass-loader	7.1.0

2. webpack.config.js に設定を追加します。

const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry: './src/index.js', // 入力元のファイル名(エントリポイント)
  output: {
    path: __dirname + '/static/dist',
    filename: 'bundle.js'// JavaScript の出力先のファイル名 (static/dist/bundle.js)
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'bundle.css' // CSS の出力先のファイル名 (static/dist/bundle.css に出力)
    })
  ],
  module: {
    rules: [
      { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader }, 'css-loader' ] },
      { test: /\.scss$/, use: [ { loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader' ] }, // 追加
    ]
  },
  optimization: {
    minimizer: [
      new TerserPlugin(), // JavaScript の minify を行う
      new OptimizeCSSAssetsPlugin() // CSS の minify を行う
    ]
  }
}

3. エントリファイル上で、必要な SCSS ファイルを import します。

// src/index.js
import './xxx.scss'; // SCSSのインポート

4. npx webpack コマンドを実行します。

[任意] Babel を使用する手順

Babel で ES5 形式にトランスパイルする場合は、上記に加えて下記の手順を行います。

1. npm install --save-dev @babel/core @babel/preset-env babel-loader core-js regenerator-runtime コマンドを実行して必要なライブラリを導入します。

ライブラリ	記載時点のバージョン
@babel/core	7.2.2
@babel/preset-env	7.3.1
babel-loader	8.0.5
core-js	3.2.1
regenerator-runtime	0.13.3