使用webpack打包ts代码

通常情况下，实际开发中需要使用构建工具对代码进行打包，TS也可以结合构建工具进行使用，以webpack为例，介绍如何结合构建工具使用TS。

基本功能实现步骤：

项目初始化，生成package.json：npm init -y

下载构建工具

安装使用webpack时需要的依赖：cnpm i -D webpack webpack-cli typescript ts-loader

新建webpack的配置文件webpack.config.js

webpack.config.js：

const path = require("path") //引入一个包，node.js的一个模块，主要用来帮助拼接路径

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

module.exports = {

        //指定入口文件，等于程序中的主文件

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

        //指定打包完成的文件所在的目录

output:{

//指定打包后的文件目录

path:path.resolve(__dirname,"dist"), // 直接在原有path后面拼接

//打包后的文件的名称

filename:"bundle.js",

         }，

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

module:{

//指定loader加载的规则

rules:[

                                {

// test 指定规则生效的文件

test:/\.ts$/, // 表示匹配所有的以 .ts 结尾的文件，即所有的ts文件

                                        // use指定要使用的loader

use:"ts-loader", // use指定要使用的loader

//excludes指定要排除的文件夹

excludes:/node-modules/, // 所有文件路径中有node-modules的文件都排除，即排除node-modules下所有文件。

}

]

        }

}

新建ts的配置文件tsconfig.json

tsconfig.json:

{

// 简单写一下，内容可更改

"compilerOptions":{

"modules":"ES2015",

"target":"ES2015",

"script":true,

}

}

在package.json文件中添加属性："build":"webpack"，可以通过build命令直接执行webpack

package.json：

在终端npm run build来执行打包。

打包成功：

webpack在ts中的插件

生成html文件插件：html-webpack-plugin

安装插件：cnpm i -D html-webpack-plugin

有助于生成html文件，命令完成后，在package.json中多出配置选项

需要对webpack.config.js进行配置

首先，需要引入插件

const path = require("path")

//引入html插件

const HTMLWebpackPlugin = require( "html-webpack-plugin" )

module.exports = {

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

output:{

path:path.resolve(__dirname,"dist"),

filename:"bundle.js",

         }，

module:{

rules:[

                                {

test:/\.ts$/,

use:"ts-loader",

excludes:/node-modules/,

}

]

        },

//配置webpack插件

plugin:{

new HTMLWebpackPlugin(), // 效果自动生成html文件，并且自动引入相关资源

// 也可以对生成的html进行自定义

                 new HTMLWebpackPlugin(options:{

title:"这是一个自定义的title",

                } ),

// 也可以根据自定义html模板生成html文件

                 new HTMLWebpackPlugin(options:{

template:"./src/index.html", //html模板文件位置

                } ),

        }

}

webpack开发服务器插件：webpack-dev-server

安装插件：cnpm i -D webpack-dev-server

webpack开发的服务器插件，相当于在项目中安装了一个内置的服务器，项目可以直接在这个服务器运行，这个服务器和webpack是直接相关联的，可以根据项目的改变自动刷新。

手动添加package.json配置文件内容："start":"webpack serve --open chrome.exe"\

表示启用webpack服务器并且用chrome打开网页

终端：npm start 启动服务器，并且能自动打开网页

清除dist目录插件：clean-webpack-plugin

安装插件：cnmp i -D clean-webpack-plugin

每次编译前，将dict目标目录先清空再把新文件放进去，确保现在目标文件夹下的文件都是最新的，避免有旧文件出现的情况。

const path = require("path")

const HTMLWebpackPlugin = require( "html-webpack-plugin" )

//引入clean插件

const {CleanWebpackPlugin }= require( "clean-webpack-plugin" )

module.exports = {

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

output:{

path:path.resolve(__dirname,"dist"),

filename:"bundle.js",

         }，

module:{

rules:[

                                {

test:/\.ts$/,

use:"ts-loader",

excludes:/node-modules/,

}

]

        },

//配置webpack插件

plugin:{

new HTMLWebpackPlugin(),

new CleanWebpackPlugin(),

        },

//用来设置引用模块

resolve:{ //必需的

extensions:['.ts','.js'] //凡是以.ts、.js结尾的文件都可以作为模块使用

        }

}