typeScript 之 (5) 打包

 

注意執行以下命令安裝包

npm init -y
npm i typescript
npm i ts-loader
npm i webpack  -g
npm i webpack-cli  -g
npm html-webpack-plugin
npm webpack-dev-server
npm @babel/core
npm @babel/preset-env
npm babel-loader
npm core-js

 

package.json 去配置

執行 npm run start 就可以運行

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

 

webpack.config.js 配置

 

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
 entry:['./src/index.ts'],
 output:{
  filename:'bundle.js',
  path:resolve(__dirname,'dist'),
  // 打包時不要箭頭函數
  environment:{
    arrowFunction:false
  }
 },
 module:{
   rules:[
     {
       test:/\.ts$/,
       use:[
         {
          loader:'babel-loader',
          options:{
            //設置預定義的環境
            presets:[
              [
                '@babel/preset-env',
                {
                  //按需加載
                  useBuiltIns:'usage',
                  "corejs":{
                    version:3
                  },
                  targets:{
                    chrome:'68',
                    firefox:'60',
                    ie:'9',
                    safari:'10',
                    edge:'17'
                  }
                }
              ]
            ]
          }
         },
         'ts-loader'
      ],
       exclude:/node_modules/
     },
   ]
 },
 plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
 ],
 mode:"development",
 devServer:{
   hot:true
 },
 resolve:{
   //省略后綴名
   extensions:['.ts','.js']
 }

}

 

 

tsconfig.json

{
  "compilerOptions": {
    "module":"es2015",
    "target":"es2015",
    // 這個是總檢查配置的總開關(只與三個屬性有關)
    "strict": true
  }
}