項目創建
在文件夾空白處單擊鼠標右鍵，選擇 在此處打開Powershell窗口.
1. 初始化項目
npm init
回答一系列的問題（也可以直接回車使用默認值）後，在當前項目文件夾中會出現一個package.json的配置文件。
{
"name": "ts_webpack_vscode",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
2.安裝所需的基本模塊
Powershell窗口或者vscode中新建終端 輸入指令：
npm install --save-dev webpack webpack-cli typescript ts-loader 使用vscode 打開此項目
3.添加配置文件
在項目根目錄創建新文件(tsconfig.json),即TypeScipt的配置文件.
下面是修改過的配置,簡單介紹下:
sourcemap 是否生成.map文件
declaration 是否生成.d.ts文件
declarationDir .d.ts文件存放目錄
exclude 編譯時候忽略的文件
{
"compilerOptions": {
"module": "es6",
"target": "es5",
"sourceMap": true,
"declaration": true,
"declarationDir": "./dist/typing",
"lib": [
"webworker",
"es6",
"es5",
"dom"
]
},
"exclude": [
"node_moudles",
"dist"
]
}在項目根目錄創建新文件(webpack.config.js)，即webpack配置文件.
resolve.modules 編譯搜索目錄
ts-loader 編譯typescript工具
簡單介紹設置：
entry 項目入口（啓動）
output 生成文件地址
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/main.ts',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
// For our normal typescript
test: /\.ts?$/,
use: [
{
loader: 'ts-loader'
}
],
exclude: /(?:node_modules)/,
},
]
},
resolve: {
modules: [
'src',
'node_modules'
],
extensions: [
'.js',
'.ts'
]
}
};
4.寫點代碼
在根目錄創建 src文件夾,在src文件夾下新建main.ts（即webpack 配置中入口）
console.log("hello typescript + webpack + vscode！");在package.json中寫入編譯指令 "build"
"scripts": {
"build":"webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},在vscode終端中 或 Powershell（兩者等同）輸入
npm run build編譯生成mian.js 以及.d.ts文件
5.網頁運行項目
在根目下新建index.html文件，src="dist/main.js",即生成文件地址。
<!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>安裝 webpack-dev-server 模塊
npm install --save-dev webpack-dev-server在package.json中寫入新指令 “dev”
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},在vscode終端中 或 Powershell（兩者等同）輸入
npm run dev可以看到：
PS D:\Git\_web3d\ts_webpack_vscode> npm run dev
> [email protected] dev D:\Git\_web3d\ts_webpack_vscode
> webpack-dev-server
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wdm｣: Hash: 7f042dbc150a27e0ecd3
Version: webpack 4.21.0
Time: 2396ms
Built at: 2018-10-20 20:45:23
Asset Size Chunks Chunk Names
main.js 338 KiB main [emitted] main
typing\main.d.ts 0 bytes [emitted]
Entrypoint main = main.js
.........點擊http://localhost:8080/即可啓動瀏覽器打開該鏈接,F12-》console中看到
hello typescript + webpack + vscode！運行項目完結
完善項目
1. 自定義server 端口
在webpack.config.js中添加 server自定義配置。好處之一多個項目就不會端口衝突。
compress 是否壓縮
host localhost或 其他1.1.1.1
prot 自定義端口
module.exports = {
...,
devServer: {
hot: true,
compress: true,
host: 'localhost',
port: 8888
},
...
}重新啓動server,即可產生新的 地址.
1.1 在vscode中 F5啓動項目
在vscode中按F5，選擇環境 chorme，自動生成配置文件launch.js ，修改配置中的url爲上面設置的端口地址。
{
// 使用 IntelliSense 瞭解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8888",
"webRoot": "${workspaceFolder}"
}
]
}按下F5即可chorme中啓動項目.
2.生成獨立的.map文件
安裝source-map-loader 模塊
npm i -D source-map-loader修改webpack.config.js配置
module.exports = {
...,
devtool:'source-map',
....
}devtool設置：
eval： 生成代碼 每個模塊都被eval執行，並且存在@sourceURL
cheap-eval-source-map： 轉換代碼（行內） 每個模塊被eval執行，並且sourcemap作爲eval的一個dataurl
cheap-module-eval-source-map： 原始代碼（只有行內） 同樣道理，但是更高的質量和更低的性能
eval-source-map： 原始代碼 同樣道理，但是最高的質量和最低的性能
cheap-source-map： 轉換代碼（行內） 生成的sourcemap沒有列映射，從loaders生成的sourcemap沒有被使用
cheap-module-source-map： 原始代碼（只有行內） 與上面一樣除了每行特點的從loader中進行映射
source-map： 原始代碼 最好的sourcemap質量有完整的結果，但是會很慢
重新執行編譯指令 npm run build，可以看到在dist下生成了新文件main.js.map.
3.合併.d.ts文件
添加測試代碼hello.ts
export class dome
{
static sayWord(value:string)
{
console.warn("dome test world:"+value);
}
}修改main.ts
import { dome } from "./hello";
console.log("hello typescript + webpack + vscode！");
dome.sayWord("@@@@@@@@@");代碼結構
---src
-----hello.ts
-----main.ts
重新編譯可以看到 dist/typing下有2個.d.ts文件.和.ts一一對應。
安裝webpack-dts-bundle
npm i -D webpack-dts-bundle修改webpack.config.js
var rootDir = path.resolve(__dirname);
module.exports = {
.......,
plugins: [
new DtsBundlePlugin()
],
....
};
function DtsBundlePlugin() {}
DtsBundlePlugin.prototype.apply = function (compiler) {
compiler.plugin('done', function () {
var dts = require('dts-bundle');
dts.bundle({
name: 'test',
main: rootDir + '/dist/**/*.d.ts',
out: rootDir + '/dist/main.d.ts',
removeSource: false,
outputAsModuleFolder: true,
exclude:[]
});
});
};
設置簡介：
removeSource 是否刪除源.d.ts文件
main .d.ts目錄
out 輸出文件
重新編譯 npm run build 即可在dist下生成main.d.ts文件
生成main.d.ts沒問題，但是編譯會報:(node:38612) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
有人知道怎麼解決，請留言！
4.使用webworker
安裝模塊 file-loader
npm i -D file-loader在src文件夾下增加文件：
file-loader.d.ts
declare module "file-loader?name=[name].js!*" {
const value: string;
export = value;
}tes.worker.ts
onmessage = function (msg) {
console.log("webworker receive" +msg);
postMessage('this is the response ' + msg.data);
}修改main.ts
import { dome } from "./hello";
console.log("hello typescript + webpack + vscode！");
dome.sayWord("@@@@@@@@@");
import * as workerPath from "file-loader?name=[name].js!./test.worker";
const worker = new Worker(workerPath);
worker.addEventListener('message', message => {
console.log(message);
});
worker.postMessage('this is a test message to the worker');
重新編譯 npm run build 即可在dist下生成test.worker.js文件
F5運行項目，可在console中看到消息交互。
