TypeScript学习笔记#4 webpack的基础配置

TypeScript学习笔记#4 webpack的基础配置

webpack 是比较常用的打包工具，我们在打包ts的时候需要配置一些基础配置，同样，直接上代码

// 引入一个包
const path = require("path");

// 引入html插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 引入webpackclean插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

// webpack 中的所有的配置信息都应该写在module.exports中
module.exports = {
  // 入口文件
  entry: "./src/index.ts",

  // 指定打包文件所在目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, "dist"),

    // 打包后文件的文件
    filename: "bundle.js",
  },
  mode: "development", // 设置mode

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定的是规则生效的文件
        test: /\.ts$/,

        // 要使用的loader
        use: "ts-loader",

        // 要排除的文件
        exclude: /node-modules/,
      },
    ],
  },

  // 配置webpack插件
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({ template: "./src/index.html" }),
  ],

  // 用来设置模块的
  resolve: {
    extensions: [".ts", ".js"],
  },
};