雖然今天已經是最後一天，但如果明天系統仍然可以發文的話，會先繼續發文，方便之後回顧整理系列文時，能夠有更多的篇幅來調整。

但因為下個月又有六角的活動，也許我會想去嘗試看看，寫一點 open api 的應用，希望年底前能抽出時間來重新翻修這個系列了。

繼續補充昨天的筆記，針對 webpack 專案若要支援 TypeScript，該如何設定。

Support TypeScript

I hope this project can support TypeScript, so need install and setting typescript plugin.

npm install typescript ts-loader -D

change index.js -> index.ts and writting somthing.

// index.ts

const target: string = 'Hello TypeScript';
console.log(target);

Webpack default it will look for files with the extension .js file, and the rule of TypeScript requires not to write the extension when importing file.

Between the two will conflict, so need to change the default search extension file in the resolve. The first pick for TypeScript.

In the rules, need to add node_modules to exclude is to avoid affecting. After all, not every plugin uses Typescript.

module.exports = {
  entry: './src/index.ts',
  resolve: {
    extensions: ['.ts', '.js', '.json'],
  },
  module: {
    rules: [
      // ...
      {
        test: /\.ts$/,
        use: ['ts-loader'],
        exclude: /node_modules/,
      },
    ],
  },
};

Finally, mkdir tsconfig.json, this file can write rules about TypeScript.

{
  "compilerOptions": {
    "module": "ES6",
    "target": "ES5"
  }
}

Now, npm run dev, the content of index.ts printed in browser normally.