TS学习笔记（三）

一、webpack配置

二、babel安装

npm安装webpack 

npm i -D webpack webpack-cli typescript ts-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin @babel/core @babel/preset-env babel-loader core-js 

webpack.config.js

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

module.exports = {
    mode: "production",
    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, "dist"), //打包目录
        filename: "bundle.js", // string    // 输出文件的名称
        environment:{ //输出到ie11时，箭头函数报错，需要配置禁止箭头函数
            arrowFunction:false
        }

    },
    module: { //如何处理项目中不同类型的模块
        rules: [ //用于规定在不同模块被创建时如何处理模块的规则数组
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            //预定义环境
                            presets: [
                                //指定环境
                                [
                                    "@babel/preset-env",
                                    {
                                        targets: {
                                            "chrome": '88',
　　　　　　　　　　　　　　　　　　　　　　　　　　　"ie":'11'
                                        },
                                        "corejs": "3",
                                        //usage表示按需加载，处理文件保证最小空间
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(
            options = {
                template: './src/index.html'
            }
        )
    ],
    //哪些模块可以被引入,默认ts，js文件不能被正确模块化
    resolve: {
        extensions: ['.ts', '.js']
    }
}

tsconfig.js

{
    "compilerOptions": {
        "module": "ES2015",   
        "target": "ES2015",
        "strict": false
    }}

 package.json

{
  "name": "part3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "core-js": "^3.10.1",
    "html-webpack-plugin": "^5.3.1",
    "ts-loader": "^8.1.0",
    "typescript": "^4.2.4",
    "webpack": "^5.32.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  }
}