TypeScript学习03

使用Webpack打包 ts代码

step1：先建一个项目

step2：通过npm init -y 来对项目进行初始化，最终会得到一个package.json的文件，这个文件主要用来管理项目

step3：通过执行cnpm i -D webpack webpack-cli typescript ts-loader安装开发时的依赖、ts的核心包以及一个ts的loader

step4：新建一个文件夹，自己手动输入： webpack.config.js这个是配置文件

step5：然后在这个配置文件中配置相关的信息

配置信息

// 引入一个包，path模块用于处理文件和目录的路径，在使用的时候仅需要引用一下即可

const path = require('path');

// webpack的所有配置信息都应该写在module.exports中

module.exports = {

        // 指定入口文件  index.ts是项目的入口文件

        entry: "./src/index.ts",

        //指定打包文件所在目录

        output: {

                // --direname 是一个成员，用于动态获取当前文件模块所属的绝对路径

                // path.resolve() 相当于在当前文件夹下拼接了一个文件路径

                path: path.resolve(__dirname, 'dist');

                // 打包后文件的文件

                filename: "bundle.js"

       },

        //  指定webpack打包时要使用的模块

        module: {

                // 指定要加载的规则

                rules: [

                        {

                                // test 是指定规则生效的文件，意思就是用ts-loader来处理以.ts结尾的文件

                                test: /\.ts$/,

                                use: 'ts-loader',

                                // 排除不需要用ts-loader处理的文件

                                exclude: /node-modules/

                        }

                ]

        }

}

上面是webpack的配置，还需要对ts进行配置，需要指定ts的编译规范

step1： 在根目录下新建tsconfig.json

        会自动生成一些内容，然后修改如下，可以使用es5的标准

        

 

step2：为了让webpack打包成功，还需要在package.json中增加指令

         

step3：最后在终端输入 npm run build 来执行webpack对项目进行打包