Serverlessのwebpack.config.jsを読む #AWS

sls createすればwebpackの設定ファイルは作られちゃってデプロイ設定までしてくれて、デプロイすればCloudFormationだの作ってくれちゃったり色々やってくれるServerless Frameworkですが、理解せずともいろいろできている状態はよろしくないので設定部分について少しずつ理解を深めていきます
まずは手始めにwebpack.config.jsを読みます

バージョン

Serverless v1.53.0
node v10.13.0

Serverlessのテンプレート

AWS
TypeScript

$ sls create -t aws-nodejs-typescript -n app_name -p path

できあがるwebpack.config.jsがこちら
↓↓↓↓↓↓↓

webpack.config.js

const path = require('path');
const slsw = require('serverless-webpack');

module.exports = {
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
  entry: slsw.lib.entries,
  devtool: 'source-map',
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
  },
  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
  },
  target: 'node',
  module: {
    rules: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: 'ts-loader' },
    ],
  },
};

上から見ていきます

mode

mode: slsw.lib.webpack.isLocal ? 'development' : 'production',

production, development, none の３つがあり、developmentだと非圧縮の状態でビルドされる
productionは圧縮されてビルドするという違いがある
ローカルでビルドする場合は非圧縮、リモートへビルドする場合は圧縮する

entry

entry: slsw.lib.entries,

webpackがビルドを始めるときの開始点となるJSファイルを指定する
通常はindex.jsみたいなメインとなるJSファイルを指定するところですが、Serverlessの場合はserverless-webpackに任せる形

devtool

devtool: 'source-map',

devtoolを指定すると、圧縮してビルドしたJavaScriptのコードと元のコードを対応関係を記すファイルが生成される
コンソールに表示されるJavaScriptのエラーはコンパイルしたあとのコードを表示するが、SourceMapを作っておくと、ブラウザが対応関係を確認し元のコードを表示してくれる

resolve

resolve: {
  extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
},

ビルドに含めたいファイルの拡張子を配列で指定する
TypeScript用なので.ts, .tsxなどが入っています

output

output: {
  libraryTarget: 'commonjs',
  path: path.join(__dirname, '.webpack'),
  filename: '[name].js',
},

outputには出力先と出力ファイル名を指定する

path

出力するpathを指定、この場合は.webpack/ディレクトリ配下に出力

filename

出力するファイル名を指定、entryをserverless-webpackに任せているがデフォルトだとhandler.jsという名前で出力される

// 以下のように書くと handler.bundle.jsというファイル名になる
filename: '[name].bundle.js'

libraryTarget

bundleの形式を指定していて、この場合はCommonJS形式となる

CommonJS形式とはなんぞや
- JavaScriptのモジュール管理の仕組みのこと
- module.exportsによるエクスポートとrequire()によるインポート
- exportsのプロパティに追加した関数は、requireを使って呼び出せまっせってこと

CommonJS形式で提供しておけばNode.js環境とブラウザ環境どちらでも読んでもらえる

target

target: 'node',

Node.jsで実行されるbundleを生成する

module

module: {
  rules: [
    // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
    { test: /\.tsx?$/, loader: 'ts-loader' },
  ],
},

webpackはJavascriptしか理解できないため、TypeScript等で書かれたコードは理解できない
それを解決するためにloaderを指定して変換してwebpackに理解させる設定

test

変換するファイルの拡張子を指定する
testというプロパティ名が意味不明すぎるw

loader

変換に利用するloaderを指定する
この場合、TypeScriptのts-loaderを使って変換する

以上、とりあえず一通り読んで調べて「なんこれ頭痛いわ」状態から抜け出せた気がします