【Webpack】TypeScript 打包

[swiftwind0405]

可参考https://www.webpackjs.com/guides/typescript/或https://webpack.js.org/guides/typescript/

• 安装 ts 依赖

npm install --save-dev typescript ts-loader

• 增加 tsconfig.json 配置文件

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

• webpack.config.js 添加对 ts/tsx 语法支持(ts-loader)

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  }
};

当从 npm 安装第三方库时，一定要牢记同时安装这个库的类型声明文件。可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。如：

npm install --save-dev @types/lodash