前言
初始化一个自动打包和自动加载最新 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 环境进行写作✏
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
