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

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