使用webpack打包ts代码

目录

基本功能实现步骤：

webpack在ts中的插件

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

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

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

Babel

使用流程

下载安装

修改配置文件

---

通常情况下，实际开发中需要使用构建工具对代码进行打包，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",

                                        exclude:/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",

                                        exclude:/node-modules/,

                                }

                ]

        },

        //配置webpack插件

        plugin:{

                new HTMLWebpackPlugin(),

                new CleanWebpackPlugin(),

        },

        //用来设置引用模块

        resolve:{ //必需的

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

        }

}

Babel

使用流程

下载安装

安装babel：cnpm i -D @babel/core @babel/preset-env babel-loader core-js

@babel/preset-env预置环境，必要的；core-js模拟js运行环境的代码，提高兼容性

package.json自动生成属性：

修改配置文件

webpack.config.js

const path = require("path") 

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

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

module.exports = {

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

        output:{ 

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

                filename:"bundle.js", 

                //配置打包环境

                environment:{

                        arrowFunction:false, //告诉webpack打包时候不使用箭头函数

                }

         }，

        module:{

                rules:[

                                {

                                       test:/\.ts$/,

                                       use:[ 

                                                //从后往前执行，谁在后面先执行谁

                                                //然后再用babel把新版js转换成旧版js

                                                {

                                                        //先指定使用的加载器

                                                        loader: "babel-loader"

                                                        //设置babel

                                                        options:{

                                                                // 设置预定义的环境

                                                                presets:[

                                                                        [

                                                                                //指定环境的插件

                                                                                "@babel/preset-env",

                                                                                // 配置信息

                                                                                {

                                                                                       //指定要运行的浏览器的版本

                                                                                        targets:{"chrome":"88"},

                                                                                       //指定corejs的运行版本

                                                                                       "corejs":"3",

                                                                                       //使用corejs的方式

                                                                                       "useBuiltIns":"useage",//按需加载

                                                                                }

                                                                        ]

                                                                ]

                                                        }

                                                }

                                                 "babel-loader" //配置简单的直接写babel-loader就可以

                                                "ts-loader", //先用ts-loader把ts转成js

                                        ],

                                        exclude:/node-modules/,

                                }

                ]

        },

        plugin:{

                new HTMLWebpackPlugin(),

                new CleanWebpackPlugin(),

        },

        resolve:{

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

        }

}