webpack 搭建简易 TS 开发环境

初始化项目

进入项目根目录，执行命令创建 package.json 文件

npm init -y

最终配置完的 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 server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.4",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.25.5",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }
}

下载构建工具

• webpack: 构建工具 webpack
• webpack-cli: webpack 命令行工具
• webpack-dev-server: webpack 的开发服务器
• typescript: ts 编译器
• ts-loader: ts 加载器，用于在 webpack 中编译 ts 文件
• clean-webpack-plugin: webpack 中的清除插件，每次构建都会先清除旧的打包文件
• html-webpack-plugin: webpack 中的 html 插件，用于在构建时创建 html 文件

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin html-webpack-plugin

配置 webpack

• @babel/core：babel的核心工具
• @babel/preset-env：babel的预定义环境
• @babel-loader：babel在webpack中的加载器
• core-js：core-js用来使老版本的浏览器支持新版ES语法

npm i -D @babel/core @babel/preset-env babel-loader core-js

项目根目录下创建 webpack 的配置文件 webpack.config.js

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

// webpack 所有配置信息写在 module.exports中
module.exports = {

  optimization:{
    minimize: false // 关闭代码压缩
  },

  mode: "none", // mode: development | production | none
  
  entry: "./src/index.ts", // 指定入口文件
  
  output: {
    path: path.resolve(__dirname, 'dist'), // 指定打包文件的目录
    filename: 'bundle.js', // 打包后的文件
    environment: {
      arrowFunction: false // 是否允许箭头函数
    }
  },

  // 指定 webpack 打包时使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test 指定对规则生效的文件
        test: /\.ts$/,
        // 要使用的 loader，从后面往前面执行
        use: [
          // 配置 babel
          {
            // 指定加载器
            loader: "babel-loader",
            // 配置 babel
            options: {
              // 设置预定义的环境
              presets: [
                [
                  // 指定环境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    // 兼容的浏览器
                    targets: {
                      "chrome": "58",
                      "ie": "11"
                    },
                    "corejs": "3",
                    "useBuiltIns": "usage" // 按需加载
                  }
                ]
              ]
            }
          },
          "ts-loader"
        ],
        exclude: /node-modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(), // 每次构建时清除旧的打包文件
    new HTMLWebpackPlugin({
      // title: 'learn-typescript', // 指定 document title
      template: "./src/index.html" // 指定模板
    }) // 配置打包后的 html 文件
  ],
  resolve: {
    extensions: [".ts", ".js"] // 
  }
}

配置 TS 编译选项

输入命令初始化tsconfig.json文件

tsc --init

tsconfig.json配置

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