webpack + typescript + jquery 基础配置

安装

安装 webpack 全家桶

npm i webpack webpack-cli webpack-dev-server -D

安装 jquery 和 @types/jquery (ts声明文件库)

npm i jquery -S
npm i @types/jquery -D

tsconfig.json

+ "types": ["jquery"]

+: 为此配置文件添加一条指令

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  devServer: {
    port: 3000,
    open: true,
    static: "./dist",
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
  },
+ plugins: [
+   new webpack.ProvidePlugin({
+     $: "jquery",
+     jQuery: "jquery",
+   }),
+ ],
};

package.json

 "scripts": {
+   "dev": "webpack --mode production",
+   "serve": "webpack-dev-server --mode development"
  }

测试

npm run serve

南无药王药上菩萨