BETA

[webpack]webpack.config.jsの書き方、設定方法(オプション/ローダー/プラグイン)

投稿日:2020-06-24
最終更新:2020-06-24

webpack.config.js

webpackの設定はwebpack.config.jsで行います。
プロジェクトの必要に応じてwebpack.config.jsをカスタマイズする事で自由に作業環境を構築する事ができます。

今回は

  • webpack.config.jsの基礎
  • ローダー
  • プラグイン

についてそれぞれ解説します。

前提環境

当記事は「webpackを導入してフロントエンド開発を便利にする」の続編という扱いです。
基本的な設定、環境は引き継いで解説します。
まだwebpackをインストールしたことがない場合は上記の記事を参照して下さい。

  • OS
    • macOS Catalina v10.15.5
    • Windows10 Pro v1909
  • Node.js v12.18.1
  • npm v6.14.5
  • webpack v4.43.0
  • webpack-cli v3.3.12

webpack.config.jsの雛形

まずは必要最低限のwebpack.config.jsを確認しておきましょう。

const path = require('path');  

module.exports = {  
    entry: './src/index.js',  

    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: 'bundle.js'  
    }  
};  

entry{}は元となるファイル、output{}は出力する先のディレクトリとファイル名になります。

mode

まずはmodeについて解説します。
上記の状態でビルドを実行すると、以下のような警告が表示されます。

WARNING in configuration  
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.  
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/  

modeオプションが指定されていないため、productionを指定してビルドしましたよ!という警告です。
まずはmodeオプションを設定しましょう。

modeは全部で三種類あります。

  • development
  • production
  • none

development

developmentはビルド時にminifyを行わずエラーの表示をしてくれたりと開発時に便利な設定です。
ソースマップの出力も行われるので、ブラウザのデバッグツール(Chromeの開発者ツール等)でビルドされたファイルだけではなく元のソースファイルの確認も行えます。
開発段階ではdevelopmentを指定すると良いでしょう。

production

productionはminify化や変数の置き換えによる難読化等をしてくれる、主に公開用の設定です。
こちらはソースマップの出力も行われません。
webpackはmodeオプションが指定されていないとproductionをデフォルト値として設定します。

none

noneはminify化や変数置き換え、エラー表示等全て無効にするオプションです。

modeオプションの設定

const path = require('path');  

module.exports = {  
    mode: 'development',    //追加  
    entry: './src/index.js',  

    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: 'bundle.js'  
    }  
};  

通常開発用、公開用等でビルドコマンドを作って指定するのでmodeオプションは別途package.jsonで指定する事が多いんですが、まずは基本的な使い方としてwebpack.config.jsに書いておきましょう。

複数のエントリーポイントの設定

エントリーポイントは複数設定する事ができます。
例えばトップページだけで使いたい、問い合わせページだけで使いたいというような場合ですね。

const path = require('path');  

module.exports = {  
    mode: 'development',  
    entry: {  
        bundle: './src/index.js',  
        contact: './src/contact.js',  
    },  

    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename: '[name].js'  
    }  
};  

2つの変更を行いました。

  1. entryの書き換え
  2. outputのfilenameの書き換え

outputのfilenameが[name].jsとなっていますが、ここにはentryで指定したキーがそのまま反映されます。
entry内にある連想配列のキーを参照しているので、entry: './src/index.js'の状態だと思ったような挙動になりません。
※[name]にはデフォルトでmainが与えられているので、キーが存在しないとmain.jsというファイルが出力されます。

今回の場合、dist/jsディレクトリ以下にはbundle.jsとcontact.jsがそれぞれ出力されます。
もちろんエントリーポイントはいくつでも設定可能です。

ローダー

ローダーはビルドする前の段階の機能を拡張してくれます。
webpackは標準ではJavaScriptファイルのバンドルを実行しますが、ローダーを追加する事でCSSやCSSの拡張言語であるSCSS、AltJavaScriptとして非常に人気が高いTypeScript等を使えるようになります。
今回はバンドルにCSSを含めてみましょう。

style-loaderとcss-loaderのインストール

バンドルにCSSファイルを組み込む為に必要なstyle-loadercss-loaderのインストールを行います。

$ npm i -D style-loader css-loader  

package.jsonに以下が自動追記されればOKです。

{  
  "name": "webpackProject",  
  "version": "1.0.0",  
    ~中略~  
  "devDependencies": {  
    "css-loader": "^3.5.3",        //css-loader  
    "style-loader": "^1.2.1",      //style-loader  
  }  
}  

設定

webpack.config.jsに必要な設定を追記します。

const path = require('path');  

module.exports = {  
    entry: './src/index.js',  
    output: {  
        path: path.resolve(__dirname, 'dist/js'),  
        filename : 'bundle.js'  
    },  
    module: {  
        rules: [  
            {  
                test: /\.css/,  
                use: ['style-loader','css-loader']  
            }  
        ]  
    }  
};  

module: {}を追記する事で、webpackに設定を反映させます。

cssファイルの作成

それでは実際にバンドルするソースになるcssファイルを作成しましょう。

$ vi /src/style.css  

今回は以下のように<body>タグに背景色のスタイルをあててみます。

body {  
    background: #000;  
}  

今作ったcssファイルをエントリーポイントの.jsファイルでインポートします。

$ vi /src/index.js  

以下のように追記します。

import './style.css';  

これで準備が整いました。

ビルド実行

実際にビルドしてバンドルさせてみましょう。

$ npx webpack  

index.htmlを開いて背景色が黒くなっていたら成功です!
このように非常に簡単にJavaScriptだけではなくcssファイルのバンドルが可能。
同様の手順でSCSSやTypeScript等も組み込むことができます(別途解説予定です)。

プラグイン

プラグインはWebpackを更に便利に使う為の拡張機能です。
プラグインを使うには

  1. npmでインストール
  2. webpack.config.jsに記述

と2つの手順を踏む必要があります。

今回は先述したstyle-loadercss-loaderで.jsファイルに組み込んだCSSファイルを、.jsファイルとしてではなく.cssファイルとして独立して出力してくれるmini-css-extract-pluginを使ってみましょう。

mini-css-extract-pluginのインストール

まずはプラグインをnpmでインストールします。

$ npm i -D mini-css-extract-plugin  

package.jsonに以下が自動追記されればOKです。

{    

  "name": "webpackProject",    
  "version": "1.0.0",    
    ~中略~    
  "devDependencies": {    
    "css-loader": "^3.5.3",  
    "mini-css-extract-plugin": "^0.9.0",    //mini-css-extract-pluginが自動で追記される  
    "style-loader": "^1.2.1",  
  }    
}

設定

webpack.config.jsに必要な設定を追記します。

const path = require('path');    
const MiniCssExtractPlugin = require('mini-scc-extract-plugin');    //自動で追記されている  

module.exports = {    
    entry: './src/index.js',    
    output: {    
        path: path.resolve(__dirname, 'dist/js'),    
        filename : 'bundle.js'    
    },    
    module: {    
        rules: [    
            {    
                test: /\.css/,    
                use: [  
                    {  
                        loader: MiniCssExtractPlugin.loader,    //style-loaderを削除して追加  
                    },  
                    'css-loader'  
                ]    
            }    
        ]    
    },  
    plugins: [  
        new MiniCssExtractPlugin({  
            filename: 'style.css',  
        }),  
    ],  
};    

上記では3点の変更を行っています。

  1. style-loaderは不要になる為削除している
  2. loaderとしてMiniCssExtractPluginを指定している
  3. pluginsにMiniCssExtractPluginの設定を指定している

この状態でビルドしてみると、distディレクトリにstyle.cssが新たに作成されます。

プロジェクト毎にローダーとプラグインを使い分ける

通常、ローダーやプラグインはプロジェクトによって必要なものを吟味して使い分けます。
そのためプロジェクト開始の初期段階でCSSは(あまりないですが)ベタなCSSを書くのか、SCSS等のメタ言語を採用するのか。
そのCSSもバンドルするのか、別で出力するのか。
ページごとに.jsファイルを分ける=複数のエントリーポイントを定義する必要があるのか否か。

様々な仕様によってwebpack.config.jsを定義する必要があります。
最初はどんなローダーやプラグインがあるのか、どんな設定が必要なのか戸惑うこともありますがwebpackの良いところはnpmでインストールした後不要ならバッサリ削除してしまえる事。
プロジェクトごとにインストールすればコマンド操作不要で最初からやり直せるので、何度でも環境構築が可能です。

webpackを使いこなせるようになればフロントエンド制作がとても便利になります、ぜひ恐れずどんどん触っていきましょう!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@braveryk7の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう