自学 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 配置就完成了

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

这篇关于自学 TypeScript 第三天 使用webpack打包 TS 代码的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！