webpack TS

Webpack '

webpack TSをbundleするだけ

npm i -D webpcak webpack-cli webpack-dev-server

npm i -D ts-loader typescript

webpack.config.js 設定ファイル

それぞれの意味

// webpackコマンドを叩いた際に下記を利用するので、exportする
module.exports = {
};

// outputのfilenameの書き方
// ファイル内容に応じたハッシュ値を頭につけられる
// キャッシュによる変更の適応不備を回避する
filename: "[contenthash]bundle.js",

// nodeJS上にあるgolobal変数
// 現在いるpathまでの絶対PATHを参照できる
console.log(__dirname)

// path module (引数を繋げてPATHを作れる)
const path = require("path");

// current/dist/main.jsになる
// シンプルに書ける && 区切りが/じゃないwindows等にも対応
path.resolve(__dirname, 'dist', 'main.js')

// type="module"はwebpack使用時は必要ない
// deferは必要
<script defer></script>

最小構成

const path = require("path");

module.exports = {
  mode: "development",
  
  entry: "./dist/main.js", // 起点 (bundle後のjs)
  
  output: { // 出力先と名前
    filename: "[contenthash]bundle.ts",
    path: path.resolve(__dirname, "dist"),
  },
};

TS対応

const path = require("path");

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  
  // TSも含めてbundleするので起点の(TS)を指定
  entry: "./src/food-app/main.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    
    // webpack-dev-severが内部的に保持するbundle.jsの位置を決める
    // 開発時と本番時で合わせるためにディレクトリ構成と同じにすると良い
    publicPath: "/dist/",
  },

  module: {
    // JS以外のmoduleの処理方法を記述
    rules: [
    
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      
    ],
  },
  
  resolve: {
    // TSでimport時に拡張子を補完する
    // 左から優先度が高い
    extensions: [".ts", ".js"],
  },
};

タスク

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack"
}

ポイント

// (webpackでTSを処理する際のts.config.jsonに関して)
// ディレクトリ系の指定は無視される
// コメント消したりするするやつは適応される


// webpack-dev-severを使う場合publicPathの位置に注意する
// publicPathの指定がない場合 src="bundle.jsになる"
<script src="dist/bundle.js" defer></script>


// webpack-dev-severは内部的にbundleしたjsを持つ
// work treeにはbundleした結果を出力しない

// 本番環境時に耐える方法は？
// configファイルを下記のように2つ作る
webpack.dev.js
webpack.prod.js

// タスクでそれぞれのconfigを使うように指定する
"start": "webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"

// webpack.prod.js
// devtoolがいらない
// publicPathもいらない

// Clean Pluginを入れると良い
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = { 
  entry: "..."
  output: {
    
  },
  module: {

  },
  plugins: [ // 配列の中に入れる
    new CleanWebpackPlugin()
  ]
}