项目创建
在文件夹空白处单击鼠标右键，选择 在此处打开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'),//编译文件所在目录
publicPath: '/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
> ts_webpack_vscode@1.0.0 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为server中设置的端口地址。
{
// 使用 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
module.exports = {
.......,
plugins: [
new DtsBundlePlugin()
],
....
};
function DtsBundlePlugin() { }
DtsBundlePlugin.prototype.apply = function (compiler)
{
compiler.plugin('done', function ()
{
var dts = require('dts-bundle');
var rootDir = path.resolve(__dirname);
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中看到消息交互。
html5
chrome
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。