编程语言
首页 > 编程语言> > 自学 TypeScript 第三天 使用webpack打包 TS 代码

自学 TypeScript 第三天 使用webpack打包 TS 代码

作者:互联网

安装:

首先第一步,我们要初始化我们项目,在目录下输入

npm init

接下来,我们的安装几个工具

npm i -D webpack webpack-cli typescript ts-loader

-D 意思是 开发依赖,也就是我们现在所安装的依赖都是开发依赖,完整应该是 -dev -server 我们直接用 -D 简写

webpack 就是我们打包工具的一个核心代码

webpack-cli 是 webpack 的命令行工具,装了以后我们可以通过命令行去使用

typescript 是 TS 的核心包

ts-loader 是 TS 的加载器,通过 ts-loader 可以让 webpack 和 TS 进行整合,让他们成为一体的

 下载成功之后,恭喜你,一个基础的架子这就搭好了

接下来,和六扇老师一起,让我们简单的做一个基础配置吧

基础配置:

下载完成之后,我们可以看到我们的项目里多了一个 node_modules 的文件夹,那是一些依赖不用去管

接下来在我们项目的根目录里创建一个名为 webpack.config.js 的文件,以及一个 tsconfig.json 的文件

用来配置我们的 webpack 和 TS ,目录结构如下

打开 webpack.config.js 进行配置

第一步,我们先引用一个 path 包 用来拼接路径

const paht = require('path')

第二步,写一个 module.exports 的对象,webpack 中所有的配置信息都应该写到我们的 module.exports 里

第三步,写一个 entry : " " ,

module.exports = {
    entry:"./src/index.ts",
}

意思是入口文件,就是指定打包文件位置

第四步,output :{ },里面有俩个属性一个是 path 一个是 filename 以及 environment

module.exports = {
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"bundle.js",
     environment:{
      arrowFunction:false,
     }
    },
}

path 的意思是打包完成之后文件存放的位置

ffliename 打包之后的文件叫什么

environment: arrowFunction 告诉 webpack 别使用箭头函数了

第五步,module 对象,指定打包时候要用的模块

module.exports = {
    module:{
        rules:[
            {
                test:/\.ts$/, 
                use:'ts-loader',
                exclude:/node-modules/,
            }
        ]
    }
}

里面有一个 rules 数组用来指定加载规则,里面接对象

test :正则,指定规则生效的文件,/\.ts$/ :所有以 ts 结尾的文件

use:指定要用的 loader

exclude : 要排除哪些文件

 webpack.config.js 全部代码:

// 引入一个包
const path = require('path'); // 用户拼接路径

// webpack 中所有的配置信息都应该写到我们的 module.exports 里
module.exports = {
    // 指定入口文件
    entry:"./src/index.ts",

    // 指定打包文件所在的目录
    output:{
        path:path.resolve(__dirname,'dist'),
        // 打包后文件的文件
        filename:"bundle.js",
     // 告诉 webpack 不使用箭头函数
     environment:{
      arrowFunction:false,
     }
    },
    // 指定webpack 打包时要使用的模块
    module:{
        // 指定加载的规则
        rules:[
            {
                // test 指定的是规则生效的文件
                test:/\.ts$/, // 所有以 ts 结尾的文件
                use:'ts-loader',
                // 要排除的文件
                exclude:/node-modules/,
            }
        ]
    }
}

这样一个基础的 webpack.config.js 配置就完成了

标签:代码,语言,系列,编程,严谨,数据,结构,数据结构,抽象
来源: