前言

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

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

# webpack中的typescript

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

# 初始化
npm init

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

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



 首先你需要安装Node.js
 
 然后个人建议安装一下国内的镜像☝
 
 最后安装一下全局的webpack@H_404_20@和webpack-cli@H_404_20@
 



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



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


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



4. 接下来是下来依赖包
# 安装局部的依赖
cnpm i -D webpack webpack-cli typescript ts-loader
@H_404_20@



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


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



5. 下面开始正式的操作
首先你需要创建一个webpack@H_404_20@的配置文件webpack.config.js@H_404_20@


下面开始配置一些信息，请看一下代码（有注释）：
/**
 *  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'
}
@H_404_20@


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



6. ts配置
创建一个叫 tsconfig.json@H_404_20@的文件


将以下代码复制进去：
{
    "compilerOptions": {
        "module": "ES2015",
        "target": "ES2015",
        "strict": true
    }
}
@H_404_20@



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


7. 接下来咱们就开始编译打包一下试试
首先咱们现在package.json@H_404_20@文件中配置一个命令


执行一下命令：
# 运行打包
npm run build
@H_404_20@


 


总结

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

                
                                 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。