TypeScript + Webpack 4 开发环境搭建
前段时间接触到 Microsoft 的 Microsoft.AspNetCore.SpaTemplates 模板，生成的项目使用的默认语言是 TypeScript，虽然以前在此之前并没有用过TypeScript，但第一看上去有种很熟悉的感觉。当然，也有人说 TypeScript 是 JavaScript 版本的C#，不管怎么说，有了学习的兴趣。另外，据说新版的webpack 4相比以前的版本的更快的打包速度，于是就有了把它们结合在一起使用的想法。
准备工作
请事先安装好 Node.js
新建项目文件夹，按住 Shift 键不放手，在文件夹空白处单击鼠标右键，选择 在此处打开Powershell窗口
使用npm 安装相应的模块
webpack 4 需要安装 webpack、webpack-cli 和 typescript 等必要的模块。为了使用 webpack 处理 typescript，还需要 ts-loader。
在上面打开的 Powershell 窗口中输入以下命令
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
回答一系列的问题（也可以直接回车使用默认值）后，在当前项目文件夹中会出现一个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"
}
3、添加 TypeScript 的配置文件 tsconfig.json
启动 WebStorm 并打开项目，在项目名称上单击鼠标右键 -> New -> tsconfig.json, 添加TypeScipt的配置文件，内容如下所示：
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
4、添加index.html及默认的 src/index.js文件
在项目文件夹中添加html文件，并命名为：'index.html',并编辑文件内容如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript + Webpack 4</title>
</head>
<body>
<script src="dist/main.js"></script>
</body>
</html>
在项目文件夹中添加名字为src的文件夹，并在该文件夹中添加名字为index.js的JavaScript文件,文件内容如下所示：
console.log("Hello TypeScript!");
完成以上操作后项目的结构如下所示：
webpackwithtypescript
|- src
|- index.js
|- index.html
|- package.json
|- package-lock.json
|- tsconfig.json
5、使用webpack-cli打包项目
在控制台窗口(Powershell窗口 或WebStorm的Terminal 都可以) 输入以下命令进行打包：
npx webpack
控制台显示内容如下所示：
D:\SPAProjects\webpacktypescript>npx webpack
npx: installed 1 in 11.482s
The "path" argument must be of type string
D:\SPAProjects\webpacktypescript\node_modules\webpack\bin\webpack.js
Hash: 7dffdd50a425c0f906c2
Version: webpack 4.6.0
Time: 579ms
Built at: 2018-04-18 14:23:26
Asset Size Chunks Chunk Names
main.js 577 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js 33 bytes {0} [built]
打包成功，项目文件夹中会多出 dist/main.js - 这也正是 webpack 4 未指定输出文件时默认的位置。此时在浏览器中打开index.html，并在浏览器中按下F12，进入控制台将会看到 consolr.log() 语句的输出结果。
此时的项目文件夹结构：
webpackwithtypescript
|- dist
|- main.js
|- src
|- index.js
|- index.html
|- package.json
|- package-lock.json
|- tsconfig.json
webpack 4 没有配置文件时，使用src/index.js作为默认入口，同时使用dist/main.js作为默认出口。
由于TyepScript文件的默认扩展名为.ts，所以并不适合于没有配置文件的默认状况。
6、webpack 配置文件
在项目文件夹中添加名为webpack.config.js的JavaScript文件，并编辑其内容如以下所示：
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.ts',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.ts$/,
use: "ts-loader"
}]
},
resolve: {
extensions: [
'.ts'
]
}
};
同时修改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": {
"build": "webpack", //添加这一行
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
完成以上的设置，然后将src/index.js改名为src/index.ts。
webpackwithtypescript
|- dist
|- main.js
|- src
|- index.ts
|- index.html
|- package.json
|- package-lock.json
|- tsconfig.json
使用npm run build命令编译、打包src/index.ts文件：
D:\SPAProjects\webpacktypescript>npm run build
> webpacktypescript@1.0.0 build D:\SPAProjects\webpacktypescript
> webpack
Hash: 9bf0b33a5a6b242a917e
Version: webpack 4.6.0
Time: 1683ms
Built at: 2018-04-18 15:03:36
Asset Size Chunks Chunk Names
main.js 2.84 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.ts] 35 bytes {main} [built]
在控制台窗口可以输入npm run build指令进行打包时，项目中src文件夹中的ts文件index.ts被编译，并输出为 dist/main.js。
