01、初始化项目

npm init
npm init -y
两个命令都是对项目进行初始化操作，对包进行管理。
-y的含义是yes的意思，作用是init的时候省去了敲回车的步骤，直接生成默认的package.json文件。

npm init

npm init -y

02、安装webpack相关的开发依赖

install安装的意思。
-D是开发依赖的意思。
webpack：webpack的包。
webpack-cli：webpack的命令行工具。
typescript：ts核心包。
ts-loader：webpack和typescri加载器，也是桥梁或整合的作用。

npm install -D webpack webpack-cli typescript ts-loader

03、根目录下创建webpack的配置文件webpack.config.js

// 引入path包 // 作用：拼接路径 const path = require('path'); // webpack中的所有配置信息都应该写在module.exports中 module.exports = { // 指定入口文件 entry: "./src/index.ts", // 指定打包文件所在目录 output: { // 指定打包文件的目录 path: path.resolve(__dirname, 'dist'), // 打包后的文件名 filename: 'bundle.js' }, // 指定webpack打包时要使用的模块 module: { // 指定要加载的规则 rules: [ { // test指定的是规则生效的文件 test: /\.ts$/, // 要是用的loader // 使用ts-loader去处理.ts文件 use: 'ts-loader', // 要排除的文件 exclude: /node-modules/ } ] } } 

04、根目录下创建tsconfig.json文件，并进行配置，配置可根据需求自行添加

{ "compilerOptions": { "module": "ES2015", "target": "ES6", "strict": true } } 

05、修改package.json

在package.json文件中添加"build": "webpack"打包命令。

{ "name": "demo_06_webpack_typescript", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "ts-loader": "^9.2.6", "typescript": "^4.5.4", "webpack": "^5.65.0", "webpack-cli": "^4.9.1" } } 

06、运行打包命令

第一步

在src下创建ts文件。

第二步

执行npm run build命令，对代码进行编译。

npm run build

或者执行npm start来启动开发服务器。

npm start

07、自动创建.html文件

npm install -D html-webpack-plugin

08、webpack开发服务器

npm install -D webpack-dev-server

09、清除dist目录

npm install -D clean-webpack-plugin

10、安装babel相关依赖包

babel可以兼容不同的浏览器。

npm install -D @babel/core @babel/preset-env babel-loader core-js

11、完整代码

gitee(码云) - mj01分支 - webpack_typescript 文件夹

链接说明

需要运行npm run build查看编译结果。