前段時間接觸到 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.jsonwebpack 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。
QQ群：762080163