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

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

目次

前提

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

ライブラリ バージョン
node 10.13.0
npm 6.4.1
webpack 4.25.1
webpack-cli 3.1.2
css-loader 1.0.1
mini-css-extract-plugin 0.4.4
optimize-css-assets-webpack-plugin 5.0.1

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 を requireimport できるようにするものです。
  • mini-css-extract-plugin は CSS の内容を JavaScript とは別ファイルにビルドするものです。
  • optimize-css-assets-webpack-plugin は CSS を minify するためのものです。

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

const UglifyJsPlugin = require("uglifyjs-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 UglifyJsPlugin(), // JavaScript の minify を行う
      new OptimizeCSSAssetsPlugin() // CSS の minify を行う
    ]
  }
}

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

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

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

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

問題なければ完了です。

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

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

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

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

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

const UglifyJsPlugin = require("uglifyjs-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 UglifyJsPlugin(), // 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 コマンドを実行して必要なライブラリを導入します。

ライブラリ 記載時点のバージョン
@babel/core 7.1.5
@babel/preset-env 7.1.5
babel-loader 8.0.4

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

const UglifyJsPlugin = require("uglifyjs-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" ] },
      { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: [ { loader: "babel-loader", options: { presets: ["@babel/preset-env"] } } ] }, // 追加
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin(), // JavaScript の minify を行う
      new OptimizeCSSAssetsPlugin() // CSS の minify を行う
    ]
  }
}

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

その他

  • ファイルの変更を監視して自動ビルドする場合は npx webpack --watch コマンドなどが使用できます。
  • package.json の scripts に "build": "webpack --mode=production" などを追加して、npm run build のようにコマンド実行することもできます。

参考

更新履歴

  • 2018/11/09 SCSS と Babel の項目を追加しました。
  • 2018/11/07 Webpack 4系の方法に更新しました。
  • 2017/07/13 初版