「webpack実践入門」の感想・備忘録1

posted with ヨメレバ

Amazonで見る

Kindleで見る

Kindle本「webpack実践入門」のまとめ。

点数
感想
環境構築
ローダー

点数

92点

感想

とても分かりやすかった。
webpack.config.jsの書き方が分かりづらいと思っていたが、しっかりと理解することができた。
babelはバージョンが7.4になったことでnpmのパッケージ名が変わったり、polyfillのやり方が変わったりしていて、Web上では新旧の情報が混ざっている状態だと思う。

環境構築

npm init -y
npm install --save-dev webpack webpack-cli
npm install --save jquery
フロントエンド開発の場合、npmとして配布するわけではないので全て–save-devでも問題ない。
ただし、ブラウザが実行時に必要とするものは–save、それ以外は-save-devとしておくと、ライブラリの区別が容易になる。お作法。
package.jsonのscriptsに”build”: “webpack”を追加
webpack.config.jsを作成
モジュールを作成
src/js/modules/add.js
src/js/modules/tax.js
エントリーポイント作成
src/js/app.js
npm run build

const path = require('path');

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

export default function add(number1, number2) {
  return number1 + number2;
}

export default function tax(price, salesTax) {
  return Math.round(price * salesTax);
}

import $ from 'jquery';
import add from './modules/add';
import tax from './modules/tax';

const item1Price = 400;
const item2Price = 600;
const totalPrice = add(item1Price, item2Price);
const salesTax = 1.1;
const priceIncludeTax = tax(totalPrice, salesTax);

$('body').text(priceIncludeTax);

ローダー

ローダーとは

主にJavaScript以外のファイルをバンドルするためのプログラム。
SassやTypeScript、Vueコンポーネントなどのコンパイル、画像をDataURLに変換、など。
コードをチェックするESLintのような、変換以外の目的のローダーも存在する。

babel-loader

JavaScriptをES5にトランスパイルするためのローダー。

npm install --save-dev babel-loader @babel/core @babel/preset-env
webpack.config.jsにmoduleプロパティを追加

module: {
  rules: [
    {
      // ローダーの処理対象ファイル
      test: /\.js$/,
      // ローダーの処理対象となるディレクトリ
      include: path.resolve(__dirname, 'src/js'),
      use: [
        {
          // 利用するローダー
          loader: 'babel-loader',
          // ローダーのオプション
          options: {
            presets: [['@babel/preset-env', { modules: false }]] // modulesはimport文の変換の指定。falseの場合は書かなくてもOK(デフォルトがauto=falseなので)
          }
        }
      ]
    }
  ]
}

※Babel7.4でのPolyfill関連は以下のサイトにわかりやすくまとめてある https://qiita.com/soarflat/items/21b8955f992bf7d38581

sass-loader/css-loader/style-loader

sass-loader
Sassをコンパイルするためのローダー。
css-loader
CSS をモジュールに変換するためのローダー。
style-loader
css-loader で変換したCSSを<style>タグで出力するためのローダー。

npm install -save-dev sass-loader node-sass css-loader style-loader
app.jsにscssファイルのimportを追加
import '../scss/style.scss';
webpack.config.jsのmodule.rulesに設定を追加

{
  // ローダーの処理対象ファイル
  test: /\.scss$/,
  // ローダーの処理対象となるディレクトリ
  include: path.resolve(__dirname, 'src/scss'),
  // 利用するローダー
  // sass-loader css-loader style-loader の順で実行される
  use: [
    // css-loader で変換したCSSを<style>タグで出力する
    'style-loader',
    // CSS をモジュールに変換する
    'css-loader',
    // Sass を CSS にコンパイルする
    'sass-loader'
  ]
}

url-loader

CSSで使用している画像をDataURLに変換してバンドルするためのローダー。

npm install -save-dev url-loader
webpack.config.jsのmodele.rulesに設定を追加

{
  // ローダーの処理対象ファイル
  test: /\.(png|jpg|gif)$/i,
  // ローダーの処理対象となるディレクトリ
  include: path.resolve(__dirname, 'src/images'),
  // 利用するローダー
  loader: 'url-loader'
}

file-loader

全ての画像をバンドルしてしまうと以下のデメリットがある。

DataURLに変換することで、元画像よりもサイズが大きくなる(Base64でエンコードされたデータは1/3程度大きくなる)
JavaScriptの解析時間が長くなる

そのため、file-loaderを使って大きい画像はそのままファイルとして出力し、小さい画像だけをバンドルするのが一般的。

npm install -save-dev file-loader
webpack.config.jsのurl-loaderにoptionsを追加(rulesにfile-loaderは不要)

options: {
  // 画像のファイルサイズが 10KB以上だったら DataURL に変換せずに出力する
  limit: 10240,
  // 出力する DataURL に変換しなかった画像の名前 [name].[ext]は [バンドル前のファイル名].[[バンドル前のファイルの拡張子]
  name: '[name].[ext]',
  // DataURL に変換しなかった画像の出力先（デフォルトでは output.path に指定したパス（今回は public/js）に出力される）
  outputPath: '../images/',
  // 出力されるファイルからの画像の読み込み先
  publicPath: path => './images/' + path
}

ローダー設定の書き方は色々ある

webpack.config.jsが分かりづらい原因の1つだと思う。

複数のローダーを利用する場合は、useに配列で記述する。

use: [
  'style-loader',
  'css-loader',
  'sass-loader'
]

1つでもoptionsを指定する場合はオブジェクト配列で記述する。

use: [
  {
    loader: 'babel-loader',
    options: {
      presets: [['@babel/preset-env', { modules: false }]]
    }
  },
  {
    loader: 'jshint-loader'
  }
]

ローダーが1つの場合はuseを省略することができる。

test: /\.js$/,
include: path.resolve(__dirname, 'src/js'),
loader: 'babel-loader',
options: {
  presets: [['@babel/preset-env', { modules: false }]] // modulesはimport文の変換の指定。falseの場合は書かなくてもOK(デフォルトがauto=falseなので)
}