使用webpack打包ts代码

生成webpack.json包

npm init -y

使用以下命令安装工具依赖(-D：代表安装的是开发环境的依赖)

npm i -D

npm i -D webpack webpack-cli typescript ts-loader

• webpack：打包工具核心代码
• webpack-cli：webpack的命令行工具（安装后可以通过命令行使用webpack）
• typescript：ts的核心包
• ts-loader：webpack的加载器（必须安装它，ts才能在webpack中使用）

创建webpack.config.js文件

// 引入一个包
const path = require('path');

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

module.exports = {
    // 指定入口文件
    entry:"./src/two.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的文件
        filename:'bundle.js'
    },
    // 指定webpack打包时使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test 指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use:'ts-loader',
                // 要排除的文件
                exclude: /node_modules/
            }
        ]
    }

}

在pachage.json中的scripts中添加"build":"webpack"。

命令行运行以下命令进行打包

npm run build

npm i -D html-webpack-plugin

html-webpack-plugin：这是一个非常常用的Webpack插件，用于自动生成HTML文件，并将打包后的JavaScript文件注入到其中。

在webpack.config.js文件中引入并配置html-webpack-plugin

// 引入一个包
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

module.exports = {
    // 指定入口文件
    entry:"./src/two.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的文件
        filename:'bundle.js'
    },
    // 指定webpack打包时使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test 指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use:'ts-loader',
                // 要排除的文件
                exclude: /node_modules/
            }
        ]
    },

    // 配置webpack插件
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/temp.html'
        }),
    ]

}

在项目的src目录下创建一个temp.html文件，作为模板文件。这个文件包含基本的 HTML 结构。

打包后的JavaScript文件会自动注入到<script>标签中。

npm run build

Webpack会根据配置进行构建，并在dist目录下生成一个新的HTML文件，其中包含了打包后的JavaScript文件的引用。

webpack-dev-server：用于启动一个开发服务器，支持热模块替换（HMR）等功能，可以实现项目有变更时，自动重新构建项目，并自动刷新浏览器。

npm i -D webpack-dev-server

在package.json中添加start命令配置。

运行以下命令即可。

npm run start

看到successfully就表示成功了。

[TypeScript 构建工具之 webpack_typescript webpack-CSDN博客](https://blog.csdn.net/fishmemory7sec/article/details/141140940?ops_request_misc=&request_id=&biz_id=102&utm_term=webpack typescript 编译&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-1-141140940.142^v100pc_search_result_base1&spm=1018.2226.3001.4187)

原文地址：https://blog.csdn.net/qq_63432403/article/details/142715011

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！