kamiの日記

Webサービスをつくって生きています

メモ

webpack: JavaScript用のモジュールバンドラ。 Entry, Output, Loader, Plugin, Modeの5つの要素からなる

  • Entry: エントリーポイントの設定を行う。エントリーポイントとはモジュール間の依存関係の解析を開始する地点のこと
  • Output: コンパイルされたファイルをディスクに書き込む方法を設定する
  • Loader: デフォルトではJavaScriptJSONのみを処理する。Loaderにより他のタイプのファイル処理を有効にする
  • Plugin: アセット管理など柔軟な処理を行える機構とその設定
  • Mode: 環境を設定する。環境ごとに最適な処理を行えるようになる

-

webpackはv4からwebpack-cliが必須となる。

webpack-dev-server: 開発用のサーバ。検知対象のファイルが変更された際にブラウザを更新する。メモリ上に展開するので高速にアクセスできる(ファイルが作成される訳ではないので注意)

$ yarn init -y
$ yarn add -D webpack webpack-cli webpack-dev-server

下記でサーバを起動する

$ npx webpack-dev-server

-

Reactアプリを書くための最低限のパッケージをインストールする。

  • @babel/preset-env: 環境によって必要なロードを管理してくれる
  • @babel/preset-react: JSXを処理してくれたりする
  • babel-loader: babelのwebpack用プラグイン
$ yarn add react react-dom
$ yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader

.babelrcはBabelの設定を書くファイルで、次のように書く

{
  "presets": ["@babel/env", "@babel/react"]
}

-

webpackの設定ファイル: webpack.config.jsは次のような感じ。 resolveでモジュールの解決方法を設定する

module.exports = {
  mode: 'development',
  entry: './src/index.jsx',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  devServer: {
    contentBase: './dist'
  },
}

-

developmentとproductionでファイルを分ける方法がプラクティスとしてある

ref: https://webpack.js.org/guides/production/

-

TypeScriptを有効にするには以下を追加し.babelrcにも追記する

$ yarn add -D @babel/preset-typescript

-

DefinitelyTyped: 型定義ファイルのリポジトリfooパッケージの型ファイルは@types/fooとなり、コンパイラによって自動的にインクルードされる

$ yarn add -D @types/react @types/react-dom @types/react-redux