webpack+typescript入门实例

使用npm 安装相应的模块

webpack 4 需要安装 webpackwebpack-cli 和 typescript 等必要的模块。为了使用 webpack 处理 typescript,还需要 ts-loader
在VSCode的终端输入以下命令

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

3、手动添加 TypeScript 的配置文件 tsconfig.json:

{
  "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>

5、在项目文件夹中添加名字为src的文件夹,并在该文件夹中添加名字为index.js的JavaScript文件,文件内容如下所示:

console.log("Hello TypeScript!");

完成以上操作后项目的结构如下所示:

webpackwithtypescript
  |- src
    |- index.js
  |- index.html
  |- package.json
  |- package-lock.json
  |- tsconfig.json

6.使用webpack-cli打包项目,输入以下命令:

npx webpack

其中npx详解请参照:

执行后控制台显示内容如下所示:

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]

7、打包成功,项目文件夹中会多出 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,所以并不适合于没有配置文件的默认状况。

8、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‘
        ]
    }
};

9、同时修改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"
}

10、完成以上的设置,然后将src/index.js改名为src/index.ts

webpackwithtypescript
    |- dist
       |- main.js
    |- src
       |- index.ts
    |- index.html
    |- package.json
    |- package-lock.json
    |- tsconfig.json

11、使用npm run build命令编译、打包src/index.ts文件:

D:\SPAProjects\webpacktypescript>npm run build

> [email protected] 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

参考:https://www.cnblogs.com/yasepix/p/9294499.html

原文地址:https://www.cnblogs.com/vickylinj/p/12228281.html

时间: 2024-10-27 04:45:44

webpack+typescript入门实例的相关文章

Vue.js2.0从入门到放弃---入门实例

最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api...废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 既然是入门实例,那肯定从最基础的开始了,希

DWR之入门实例(一)

DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它的最新版本DWR0.6添加许多特性如:支持Dom Trees的自动配置,支持Spring(JavaScript远程调用spring bean),更好浏览器支持,还支持一个可选的commons-

React 入门实例教程

React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的

Java AIO 入门实例(转)

Java7 AIO入门实例,首先是服务端实现: 服务端代码 SimpleServer: Java代码   public class SimpleServer { public SimpleServer(int port) throws IOException { final AsynchronousServerSocketChannel listener = AsynchronousServerSocketChannel.open().bind(new InetSocketAddress(por

FPGA入门实例一:LFSR

一:任务: 要求使用Verilog语言在Xilinx Virtex-6开发板上实现线性反馈移位寄存器(LFSR)的硬件逻辑设计. 二:前期准备: 基本上完成一个简单的设计需要用到以下几个软件 逻辑:Uedit32(硬件狗吐血推荐) 综合:ISE14.1 仿真:Modelsim SE 10.1b 分析:Chipscope Pro 三:设计流程 逻辑: 首先当然是RTL级设计,俗称硬件逻辑设计.使用的是Uedit32,这个软件相当于一个记事本,但编辑功能十分强大,简直是写Verilog代码的神器,具

php页面get方法实现ajax,入门实例教程

ajax,入门实例教程 本例针对php页面,做了一个小的demo加深对ajax的理解 1.文档结构: 共有ajax.php 和action.php 2个页面. 2.源码如下: /*ajax.php页面*/<!DOCTYPE html> <html lang="en"> <head> <title> ajax</title> <script type="text/javascript"> func

Omnet++ 4.0 入门实例教程

http://blog.sina.com.cn/s/blog_8a2bb17d01018npf.html 在网上找到的一个讲解omnet++的实例, 是4.0下面实现的. 我在4.2上试了试,可以用.照着做就能完成,有些小地方不同而已 Omnet++ 4.0 入门实例教程根据http://omnest.com/webdemo/ide 上的实例,自己动手做了做.新版本的4.0 跟它视频上的版本有些差别,配图说明一下我的操作过程,供大家一起学习.现在开始.首先,开发环境选择simulation 的视

freemarker入门实例与源码研究准备工作

首先去freemarker官网下载源码jar包,本文是基于freemarker-2.3.21.tar.gz进行研究的.解压源码包,找到freemarker的源码部分导入eclipse工程中.需要注意的是:freemarker的ftl文件解析使用javacc实现的,所以源码中没有解析类(FMParse.java).要想研究freemarker源码,往往还需要引入freemarker.jar(含有FMParse.class),否则源码会出现编译问题.另外,还需要引入的jar包有:commons-lo

Android HttpGet() 请求简单入门实例

HttpClient httpclient = new DefaultHttpClient(); String url = "http://example.com"; List<NameValuePair> params = new ArrayList<NameValuePair>(); params.add( new BasicNameValuePair( "param", "value" ) ); URI uri =