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

前提

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

ライブラリ バージョン
webpack 3.0.0
css-loader 0.28.4
extract-text-webpack-plugin 2.1.2

手順

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

2. 作業フォルダ上で npm install --save-dev webpack css-loader extract-text-webpack-plugin コマンドを実行して必要なライブラリを導入します。 (css-loader は JavaScript 上で CSS を requireimport できるようにするものです。extract-text-webpack-plugin は CSS の内容を JavaScript とは別ファイルにビルドするものです)

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

// webpack.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: './src/index.js', // 入力元のファイル名(エントリポイント)
    output: {
        path: path.resolve(__dirname, 'static/dist'),
        filename: 'bundle.js' // JavaScript の出力先のファイル名 (static/dist/bundle.js)
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract(
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true // CSS の minify を行う
                        }
                    }
                )
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin(), // JavaScript の minify を行う
        new ExtractTextPlugin("bundle.css"), // CSS の出力先のファイル名 (static/dist/bundle.css に出力)
    ]
}

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

4. エントリファイル上で、必要な CSS ファイルを import します。(require('./index.css') でもよいです)

// src/index.js

import style from './index.css'; // CSSのインポート

5. Windows の場合、もし PATH に .\node_modules\.bin が含まれていなければ含むようにします。 (環境変数の編集で追加するか、使用しているコマンドプロンプト上のコマンドで set PATH=.\node_modules\.bin;%PATH% とします)

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

問題なければ完了です。

その他

  • ファイルの変更を監視して自動ビルドする場合は webpack --watch コマンドなどが使用できます。