TypeScript-webpack配置

初始化一个自动打包和自动加载最新 JS 代码的 webpack 项目，然后在通过 tsc --init 初始化 TypeScript 配置文件：

通过 npm install typescript ts-loader 安装对应 loader：

npm install typescript ts-loader

修改 webpack 配置文件：

最终 webpack 的配置内容如下：

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const Webpack = require("webpack");

module.exports = {
    /*
    devServer: 自动检测文件变化
    * */
    devServer: {
        contentBase: "./bundle",
        open: true,
        port: 9090,
        hot: true, // 开启热更新, 只要开启了热更新就不会自动刷新网页了
        hotOnly: true // 哪怕不支持热更新也不要刷新网页
    },
    /*
    配置sourcemap
    * */
    devtool: "cheap-module-eval-source-map",
    /*
    mode: 指定打包的模式
    * */
    mode: "development", // "production" | "development"
    /*
    entry: 指定需要打包的文件
    * */
    entry: "./src/js/index.ts",
    /*
    output: 指定打包之后的文件输出的路径和输出的文件名称
    * */
    output: {
        /*
        filename: 指定打包之后的JS文件的名称
        * */
        filename: "js/bundle.js",
        /*
        path: 指定打包之后的文件存储到什么地方
        * */
        path: path.resolve(__dirname, "bundle")
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    /*
    module: 告诉webpack如何处理webpack不能够识别的文件
    * */
    module: {
        rules: [
            // ts编译配置
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    /*
    plugins: 告诉webpack需要新增一些什么样的功能
    * */
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
        }),
        new CleanWebpackPlugin(),
        new Webpack.HotModuleReplacementPlugin()
    ]
};

package.json 内容如下：

{
  "name": "01-webpack-introductory",
  "version": "1.0.0",
  "description": "",
  "main": "src/js/index.js",
  "scripts": {
    "dev": "npx webpack-dev-server --config webpack.config.js",
    "build": "npx webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "html-webpack-plugin": "^3.2.0"
  },
  "dependencies": {
    "@types/jquery": "^3.5.0",
    "jquery": "^3.5.1",
    "reflect-metadata": "^0.1.13",
    "ts-loader": "^4.5.0",
    "typescript": "^3.9.5",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

运行 dev 脚本效果如下：

后面的 TS 知识点文章博主就基于该 webpack 环境进行写作✏