cidermitaina

フロントエンドエンジニアをやっています。
25歳です。頑張るから読んでほしい。

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

or

npm run webpack

or

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

モードはdevelopmentproductionnoneが存在します。

・production

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

たとえば、

bundleしたソースのconsoleを消す

uglifyjs-webpack-pluginをinstallします。

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

or

yarn add uglifyjs-webpack-plugin --dev

or

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の続きも書こうと思います。

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