webpack 打包ts项目_webpack+typescript入门实例

使用npm 安装相应的模块

webpack 4 需要安装 webpack、webpack-cli 和 typescript 等必要的模块。为了使用 webpack 处理 typescript，还需要 ts-loader。

在VSCode的终端输入以下命令

1、初始化项目：

npm init

回答一系列的问题(也可以直接回车使用默认值)后，在当前项目文件夹中会出现一个package.json的配置文件。文件内容大概如下所示：

{"name": "webpacktypescript","version": "1.0.0","description": "","main": "index.js","dependencies": {"ts-loader": "^4.2.0","typescript": "^2.8.1","webpack": "^4.6.0","webpack-cli": "^2.0.14"},"devDependencies": {},"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"}

2、安装需要的各个模块：

npm install webpack webpack-cli typescript ts-loader --save-dev

3、手动添加 TypeScript 的配置文件 tsconfig.json：

{"compilerOptions": {"module": "commonjs","target": "es5","sourceMap": true},"exclude": ["node_modules"]

}

4、添加index.html及默认的 src/index.js文件

在项目文件夹中添加html文件，并命名为：'index.html',并编辑文件内容如下所示：

TypeScript + Webpack 4