# webpack 模組打包工具
>Editor: Jung
:::info
- 通常情況下，實際開發中我們都需要使用模組打包工具對程式碼進行打包，TS同樣也可以結合模組打包工具一起使用，下邊以webpack為例介紹一下如何結合模組打包工具使用TS。

- 步驟：

1. 初始化專案

- 進入專案根目錄，執行命令 ``` npm init -y```
- 主要作用：創建package.json文件

2. 下載模組打包工具

- ```npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin```
- 共安裝了7個包
- **webpack**
- 模組打包工具webpack
- **webpack-cli**
- webpack的命令行工具
- **webpack-dev-server**
- webpack的開發服務器
- **typescript**
- ts編譯器
- **ts-loader**
- ts加載器，用於在webpack中編譯ts文件
- html-webpack-plugin
- webpack中html插件，用來自動創建html文件
- clean-webpack-plugin
- webpack中的清除插件，每次構建都會先清除目錄

3. 根目錄下創建webpack的配置文件webpack.config.js

- ```javascript
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
optimization:{
minimize: false // 關閉程式碼壓縮，可選
},

entry: "./src/index.ts",

devtool: "inline-source-map",

devServer: {
contentBase: './dist'
},

output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
environment: {
arrowFunction: false // 關閉webpack的箭頭函數，可選
}
},

resolve: {
extensions: [".ts", ".js"]
},

module: {
rules: [
{
test: /\.ts$/,
use: {
loader: "ts-loader"
},
exclude: /node_modules/
}
]
},

plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title:'TS測試'
}),
]

}

  4. 根目錄下創建tsconfig.json，配置可以根據自己需要

     - ```json
       {
           "compilerOptions": {
               "target": "ES2015",
               "module": "ES2015",
               "strict": true
           }
       }

5. 修改package.json添加如下配置

- ```json
{
...略...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
...略...
}

  6. 在src下創建ts文件，並在並命令行執行```npm run build```對程式碼進行編譯，或者執行```npm start```來啟動開發服務器

:::

###### tags: `TypeScript`