Webpack

• webpackはバンドラ
  • バンドラ→複数ファイルを1つにまとめる
• 最低限必要なパッケージ
  • webpack
  • webpack-cli
• webpackには実行モードが有る
  • webpack --mode development : 非圧縮出力
  • webpack --mode production : 圧縮出力
  • webpack : 実行結果埋め込み
• エントリポイント(デフォルトでsrc/index.jsで読み込んだjsファイルが対象
  • 出力はdist/main.js
    • htmlファイルからはこれを読み込む

Loader

- `js`以外のファイルを纏めるためのプラグイン的なモジュール

    const path = require("path");

    module.exports = {
        entry: "./src/index.js",
        output: {
            filename: "main.js",
            path: path.resolve(__dirname, "dist"),
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    // useは後ろから実行される
                    // sa(c)ssをcssに変換 -> cssをjsに読み込み -> jsのcssをhtmlのstyleに反映
                    use: ["style-loader", "css-loader", "sass-loader"],
                },
                {
                    // 拡張子 .ts の場合
                    test: /\.ts$/,
                    // TypeScript をコンパイルする
                    use: "ts-loader",
                },
            ],
        },
        // import 文で .ts ファイルを解決するため
        // これを定義しないと import 文で拡張子を書く必要が生まれる。
        // フロントエンドの開発では拡張子を省略することが多いので、
        // 記載したほうがトラブルに巻き込まれにくい。
        resolve: {
            // 拡張子を配列で指定
            extensions: [
                '.ts', '.js',
            ],
        },
    };

Babel

Babelはモダンコードをレガシーブラウザ対応コードへトランスパイルする

• 最低限必要なパッケージ
  • babel-loader
  • @babel/core

  const path = require('path')

  module.exports = {
      module:{
          rules:[
		{ 
			  test: /\.js$/, 
			  exclude: /node_modules/, 
			  loader: "babel-loader" 
		}        
        ]
      }
  }

• babel-loaderには変換が必要な機能を取り扱うためのpluginが必要
  • 個別でプラグインを取り入れることも出来る
    • @babel/plugin-transform-classes:Classを変換する
  • プラグインをまとめたpresetsを使用することで、個別でインストールが不要になる
    • "@babel/preset-env"

{
	"presets": ["@babel/preset-env"]
}

Webpack + babel + typescript

• babel-loaderだけでtypescriptはトランスパイル可能なのでbabelが必要な場合はts-loaderは不要
  • @babel/preset-typescriptは必要
• 【webpack5】ts-loader + babel-loader を併用する【TypeScript】

Loading...