使用webpack打包ts代码 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第2天

今天继续来学习 TypeScript >_<

一般开发中，TypeScript会搭配打包工具使用，比较多的就是webpack。使用webpack将ts代码进行编译。 总共分为5部分

• 初始化项目
• 安装依赖
• 编写webpack配置文件
• 编写tsconfig.json文件
• 修改package.json

首先新建好项目之后，因为webpack要使用npm，所以要使用命令npm init -y生成package.json文件，这里要注意的是项目文件名中不能有中文字符，然后要安装使用webpack需要的依赖。

cnpm i -D webpack webpack-cli typescript ts-loader 安装webpack以及webpack的命令行工具、ts核心包，ts加载器

当json文件中有依赖版本时说明安装成功

接下来需要编写webpack的配置文件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打包时要使用模块
    module: {
        //指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test: /\.ts$/,
                //要使用的Loader
                use: 'ts-loader ',
                //要排除的文件
                exclude: /node-modules/
            }
        ]
    }
    
}

到此，webpack基本配置已经完成，但是还需要指定一个ts的编译规范。在根目录新建一个tsconfig.json文件

将预置好的"exclude“部分删除，然后将编译器部分修改为es6标准并且添加严格模式

最后在package.json文件中的"scripts"中添加"build":"webpack"。意为可以使用build命令直接执行webpack。

配置完毕，在终端输入npm run build来对项目进行打包。 成功后在根目录下出现dist文件夹下名为bundle.js的文件，文件里是打包好的代码。

到此，一个最基本的webpack与ts整合就处理完了，有了一个最基本的开发环境当然后续也可以进行深入，比如功能加强，那就是webpack深入的知识了，等后续学习之后再进行补充。