TypeScript运行环境之——webpack

与使用 ts-node 不同，ts-node 只能跑在集成终端上，而无法跑在浏览器上。使用 webpack 自动将 ts 代码转为 js 代码，并创建一个本地服务，使 js 代码能够跑在浏览器上。

1、初始化项目，生成packge.json

npm init

2、安装webpack

npm install webpack webpack-cli -D // -D表示开发环境

3、创建webpack.config.js，进行配置

其中相关字段描述如下：

// 引入path模块
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development", //运行模式，development表示开发环境，production表示生产环境
  entry: "./src/index.ts", //入口文件,注意：./不能省略
  output: {
    // 打包后的出口文件
    path: path.resolve(__dirname, "./dist"), // 输出的路径，resolve表示绝对路径拼接，vue输出到dist文件夹，react输出到build文件夹
    filename: "bundle.js", //表示打包出来的文件，一般用main.js或者boundle.js
  },
  resolve: {
    // 通过这样的配置，我们在引入对应后缀文件时，就可以更为方便的使用，如：import Hello from '@components/Hello';不用写后缀名
    extensions: [".ts", ".js", ".cjs", ".json"],
  },
  devServer: {},
  module: {
    rules: [
      {
        // 表示以.ts结尾的文件以ts-loader进行load，以后还会用到打包css、scss等等的loader，都需要配置
        test: /.\ts$/,
        // 应先安装ts-loader: npm install ts-loader -D
        loader: "ts-loader",
      },
    ],
  },
  // 插件注册管理
  // 步骤：下载插件 => 引入插件 => 在plugins配置插件
  plugins: [
    new HtmlWebpackPlugin({
      // 以插件HtmlWebpackPlugin举例,它会在打包结束后根据配置的模板路径自动生成一个html文件,并把打包生成的js路径自动引入到这个html文件中.这样便刨去了单调的人工操作,提高了开发效率.
      template: "./index.html",
    }),
  ],
};

4、开启本地服务

以上只是配置了如何打包，而没法开启一个本地服务。因此需要下载一个webpack-dev-server来开启服务

npm install webpack-dev-server -D

在webpack.config.js中配置devServer，如可以配置host,port，这里使用默认配置

// 引入path模块
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development", //运行模式，development表示开发环境，production表示生产环境
  entry: "./src/index.ts", //入口文件
  output: {
    // 打包后的出口文件
    path: path.resolve(__dirname, "./dist"), // 输出的路径，resolve表示绝对路径拼接，vue输出到dist文件夹，react输出到build文件夹
    filename: "bundle.js", //表示打包出来的文件，一般用main.js或者boundle.js
  },
  resolve: {
    // 通过这样的配置，我们在引入对应后缀文件时，就可以更为方便的使用，如：import Hello from '@components/Hello';不用写后缀名
    extensions: [".ts", ".js", ".cjs", ".json"],
  },
  devServer: {},
  module: {
    rules: [
      {
        // 表示以.ts结尾的文件以ts-loader进行load，以后还会用到打包css、scss等等的loader，都需要配置
        test: /.\ts$/,
        // 应先安装ts-loader: npm install ts-loader -D
        loader: "ts-loader",
      },
    ],
  },
  // 插件注册管理
  // 步骤：下载插件 => 引入插件 => 在plugins配置插件
  plugins: [
    new HtmlWebpackPlugin({
      // 以插件HtmlWebpackPlugin举例,它会在打包结束后根据配置的模板路径自动生成一个html文件,并把打包生成的js路径自动引入到这个html文件中.这样便刨去了单调的人工操作,提高了开发效率.
      template: "./index.html",
    }),
  ],
};

在packge.json中修改script使得能够使用webpack serve命令进行执行服务的启动

{
  "name": "ts-demo",
  "version": "1.0.0",
  "description": "与使用 ts-node 不同，ts-node 只能跑在集成终端上，而无法跑在浏览器上。\r 使用 webpack 自动将 ts 代码转为 js 代码，并创建一个本地服务，使 js 代码能够跑在浏览器上。",
  "main": "index.js",
  "scripts": {
    // 使用npm run serve命令就会用webpack serve开启本地服务
    "serve": "webpack serve"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.2",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}