typescript+webpack+vscode

Techgogogo

2019-06-28

准备工作：
事先安装好 Node.js、vscode

项目创建

在文件夹空白处单击鼠标右键，选择在此处打开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

    > [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为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中看到消息交互。
typescript+webpack+vscode