前言

本篇文章讲述一个小demo，就是在webpack中使用打包编译TS

提示：以下是本篇文章正文内容，下面案例可供参考

1. 首先创建一个文件夹，然后用以下命令初始化文档

# 初始化
npm init

# 安装国内镜像
npm install -g cnpm -registry=https://registry.npm.taobao.org

# 安装全局 webpack 和 webpack-cli
cnpm i -g webpack webpack-cli

• 首先你需要安装Node.js

• 然后个人建议安装一下国内的镜像☝

• 最后安装一下全局的webpack和webpack-cli

2. 初始化文件夹之后会出现一个package.json的文件

接下来将整个目录作为项目打开你的编译器

3. 我使用的编译器是vs code

4. 接下来是下来依赖包

# 安装局部的依赖
cnpm i -D webpack webpack-cli typescript ts-loader

注意：

• 为什么要安装两次webpack和webpack-cli：因为安装全局的webpack之后会有一个全局变量webpack，可以使用它快速做到编译打包。个人理解说的不好，请自行百度吧
• ts-loader：这个插件的作用是将Ts的资源，翻译给webpack这个大文盲

安装完成之后package.json文件会多出来一些开发环境依赖模块

5. 下面开始正式的操作

• 首先你需要创建一个webpack的配置文件webpack.config.js

• 下面开始配置一些信息，请看一下代码（有注释）：

/**
 *  webpack的配置文件
 */
// 引入一个包
const path = require('path');
// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
    // 入口文件 
    entry:"./src/index.ts",
    // 指定打包文件所在的目录
    output: {
        // 指定打包文件的目录
        path:path.resolve(__dirname,'dist'),
        // 打包后生成的文件
        filename:"bundle.js"
    },

    // 指定webpack打包时要使用的模块
    module:{
        // 指定要加载的规则
        rules: [
            {
                // 指定规则生效的文件
                test:/\.ts$/,
                // 要使用的loader
                use:'ts-loader',
                // 要排除的文件
                exclude:/node_modules/
            }
        ]
    },
   // 指定webpack的环境，如果不太懂的话可以去官网看看文档
   // 当前模式为生产模式 还有一个叫开发模式
    mode:'production'
}

注意：

• 由于咱们再配置文件中配置了入口文件，那么就需要创建相应的文件

6. ts配置

• 创建一个叫 tsconfig.json的文件

• 将以下代码复制进去：

{
    "compilerOptions": {
        "module": "ES2015",
        "target": "ES2015",
        "strict": true
    }
}

注意：

• Typescript项目配置
• 其中写的不明白的话就点击上面的超链接去看看分别代表的是什么意思

7. 接下来咱们就开始编译打包一下试试

• 首先咱们现在package.json文件中配置一个命令

• 执行一下命令：

# 运行打包
npm run build

总结

1. 本篇文章讲述的就是在webpack中使用ts
2. 这只是一个小demo，它当然可以编写更为复杂的东西
3. 今天的文章就讲述到这里，希望会对你有帮助，不喜勿喷