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
  }
}