webpackについて丁寧に。

webpack4になったので、これを機に丁寧に理解したいなあ、と思ってまとめました。自分用メモです。

webpackとは

モジュールバンドラのこと。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。

モジュールバンドラ
複数のモジュールを1つにまとめたファイルを出力する
ツールのこと

なんでモジュールバンドラを使うの？

機能ごとにファイルを分割（モジュール化）できるから
自分が作成したモジュールだけではなく、外部モジュール（npmなどでインストールできるパッケージなど）も利用できるから
リクエスト数を減らせるから
依存関係を解決したファイルを出力できるから

自分が作成したモジュールだけではなく、外部モジュール（npmなどでインストールできるパッケージなど）も利用できます。

ファイルを分割（モジュール化）するメリットは？

コードが見やすくなる
名前空間を生成できる（変数の競合やグローバル汚染を防ぐ）
モジュールの保守性を高められる
モジュールの再利用性を高められる

webpackを使ってみる

実際にwebpackを使う手順です。

1. webpackローカルインストール

npm install webpack --save-dev
or
yarn add webpack --dev

2. webpack-cliのインストール

webpackコマンドでwebpackを実行するために、以下のコマンドでwebpack-cliをインストールします。
（webpack 4から必要になったみたいです。）

npm install webpack-cli --save-dev
or
yarn add webpack-cli --dev

3. webpack.config.jsの設定

webpack.config.jsとは？

webpackの設定ファイルのことです。

// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');

module.exports = {
  // モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
  mode: 'development',
  // エントリーポイントの設定
  entry: './src/js/app.js',
  // 出力の設定
  output: {
    // 出力するファイル名
    filename: 'bundle.js',
    // 出力先のパス（v2系以降は絶対パスを指定する必要がある）
    path: path.join(__dirname, 'public/js')
  }
};

4. webpackコマンドで実行

npx webpack

npm run webpack

yarn webpack

を実行するとbundle.jsという名前のファイルがpublic/js/配下に出力されます。

webpack.config.jsを詳しく

webpack.config.jsの設定に関してさらっと流しちゃったので、詳しくまとめます。

module.exports = {
    mode: 'development',
    entry:'./src/assets/js/main.js',
    output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public/assets/js')
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
}

1. mode

モードはdevelopment、production、noneが存在します。

・production

productionにすれば、何も指定しなくてもコードが圧縮されます。自分で設定をカスタマイズする場合は、uglifyjs-webpack-pluginというプラグインが必要になります。

たとえば、

bundleしたソースのconsoleを消す

uglifyjs-webpack-pluginをinstallします。

npm install uglifyjs-webpack-plugin --save-dev

yarn add uglifyjs-webpack-plugin --dev

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public/js'),
  },
  optimization: {
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {compress: {drop_console: true}},
      }),
    ],
  },
};

www.npmjs.com

・development

差分ビルドの高速化がされている。

・none

すべての設定が無効。

2. entry

出力の設定

3. output

出力の設定。出力するファイル名や出力先のパスを指定する。 OSによってパスが異なることを防ぐために、出力先のパスの指定にはpath.join()を利用

4. loader

画像やCSSなどのJavaScript以外のファイルをJavaScriptで扱えるように変換したり、バンドルする前にモジュールに対して実行する機能のことです。 TypeScriptをJavaScriptに変換、画像をDataURLに変換、コードをチェックするなど、ローダーによって機能は様々。 js以外のどんなファイルでもloaderさえ使えば読み込むことができます。

module: {
    rules: [
        {
        // 拡張子 .js の場合
            test: /\.js$/,
            exclude: /node_modules/// node_modules は除外する
            //利用するローダー
            use: [{
                  loader: 'babel-loader',// Babel を利用する
                  options: {
                      presets: ['env']
                  }
            }],
        }
    ]
}

babel-loader
ES2015（ES6）のコードをES5のコードに変換するローダー。

www.npmjs.com

って感じです。

node,jsの続きを書こう書こうと思って、webpackのを書いちゃいました。。。忘れないうちにnode.jsの続きも書こうと思います。

音楽のことも書きたい...