如何配置 Webpack 打包 TS

使用 Webpack 打包 TS 代码的详细步骤

第一步：初始化项目

• 在终端使用 npm init -y 对项目进行初始化，会产生一个 package.json 文件。

第二步：下载相关依赖

• 在终端中输入以下命令下载 webpack、webpack-cli、typescript、ts-loader 。

  npm i -D webpack webpack-cli typescript ts-loader
  

第三步：对 Webpack 进行配置

• 在根目录新建一个名为 webpackconfig.js 的文件。

• 输入以下内容：

  const path = require('path');
  
  // webpack 中的所有的配置信息都应该写在 module.exports 中
  module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件的目录
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.js"
    },
    // 指定 webpack 打包时要使用模块
    module: {
      // 指定要加载的规则
      rules: [
        {
          // test 指定的是规则生效的文件
          test: /\.ts$/,
          // 要使用的 loader
          use: 'ts-loader',
          // 要排除的文件
          exclude: /node_modules/
        }
      ]
    }
  }
  

第四步：对 TS 编译进行配置

• 在根目录新建一个名为 tsconfig.json 的文件。

• 输入以下内容：

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

第五步：配置 webpack 的指令

• 在 package.json 文件中的 script 项中加入"build": "webpack"