Ts学习记录-＞webpack打包工具

最新推荐文章于 2023-08-08 07:30:16 发布
最新推荐文章于 2023-08-08 07:30:16 发布
阅读量240 收藏
点赞数 1
文章标签： webpack 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45870982/article/details/123500616
版权
本文介绍了如何使用TypeScript、Webpack、HTMLWebpackPlugin等工具进行项目构建，包括配置package.json、tsconfig.json，安装依赖，设置入口文件、输出目录，以及使用Babel兼容性处理。全程详细讲解了从初始化到启动开发服务器的全过程。
摘要由CSDN通过智能技术生成

1、进入根目录 使用 npm init -y 生成 package.json 配置文件

npm init -y

2、安装webpack cnpm i -D webpack webpack-cli typescript ts-loader 使用的依赖

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

3、配置webpack配置文件 webpack.config.js

// 引入一个包
const path = require('path');
const { OutputFileType } = require('typescript');

/* 
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/
            }
        ]
    }
    
};

4、指定配置文件来指定TS的编译规范 在根目录创建 tsconfig.json

{
    "compilerOptions": {
        "module": "ES6",
        "target": "ES6",
       "strict": true
    }
}

5、在package.json 里面加  "build": "webpack"

 "build": "webpack"
{
  "name": "03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.2",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  }
}

6、执行命令  npm run build

 npm run build

7、生成HTML5插件安装

cnpm i -D html-webpack-plugin

8、package.json 配置引入html插件 

// 引入一个包
const path = require('path');
/* 
webpack中所有的配置信息都应该写在module.exports中
*/

// 引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件目录
        path: path.resolve(__dirname, 'dist'),

        // 打包后的文件
        filename: "bundle.js"
    },
    mode: 'development',

    // 指定webpack打包时要使用的模块
    module: {
        //指定加载的规则
        rules: [
            {
                // test指定规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件夹
                exclude: /node_modules/
            }
        ]
    },
    // 配置webpaack插件
    plugins: [
        new HtmlWebpackPlugin( {
               template: "./src/index.html"
            }
        ),
    ]
    
};

 9、指定生成 html 模板 ，自定义一篇html文件在package.json 引入

   // 配置webpaack插件
    plugins: [
        new HtmlWebpackPlugin( {
               template: "./src/index.html"
            }
        ),
    ]

 10、webpack开发服务器

cnpm i -D webpack-dev-server

11、packa.json 配置start

{
  "name": "03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",  
    "build": "webpack --mode production",
    "start": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.2",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

11、npm start  运行服务器

npm start 

12、因为每次生成js文件为替换旧文件，为了保持每次更新都是新文件需要安装插件 cnpm  i -D clean-webpack-plugin

cnpm  i -D clean-webpack-plugin

在 webpack.config.js 引入

// 引入一个包
const path = require('path');
/* 
webpack中所有的配置信息都应该写在module.exports中
*/

// 引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const {CleanWebpackPlugin} = require ('clean-webpack-plugin')

module.exports = {

    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件目录
        path: path.resolve(__dirname, 'dist'),

        // 打包后的文件
        filename: "bundle.js"
    },
    mode: 'development',

    // 指定webpack打包时要使用的模块
    module: {
        //指定加载的规则
        rules: [
            {
                // test指定规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件夹
                exclude: /node_modules/
            }
        ]
    },
    // 配置webpaack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin( {
               template: "./src/index.html"
            }
        ),
    ]
    
};

12、设置引用模块

// 用来设置引用模块
    resolve: {
        extensions: ['.ts', '.js']
    }
    

// 引入一个包
const path = require('path');
/* 
webpack中所有的配置信息都应该写在module.exports中
*/

// 引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const {CleanWebpackPlugin} = require ('clean-webpack-plugin')

module.exports = {

    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件目录
        path: path.resolve(__dirname, 'dist'),

        // 打包后的文件
        filename: "bundle.js"
    },
    mode: 'development',

    // 指定webpack打包时要使用的模块
    module: {
        //指定加载的规则
        rules: [
            {
                // test指定规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件夹
                exclude: /node_modules/
            }
        ]
    },
    // 配置webpaack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin( {
               template: "./src/index.html"
            }
        ),
    ],

    // 用来设置引用模块
    resolve: {
        extensions: ['.ts', '.js']
    }
    
};

13、安装代码兼容性插件babel cnpm i -D @babel/core @babel/preset-env babel-loader core-js

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

配置完的webpack.config.js

// 引入一个包
const path = require('path');
/* 
webpack中所有的配置信息都应该写在module.exports中
*/

// 引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const {CleanWebpackPlugin} = require ('clean-webpack-plugin')

module.exports = {

    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件目录
        path: path.resolve(__dirname, 'dist'),

        // 打包后的文件
        filename: "bundle.js"
    },
    mode: 'development',

    // 指定webpack打包时要使用的模块
    module: {
        //指定加载的规则
        rules: [
            {
                // test指定规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader:"babel-loader", 
                        
                        options: {
                             // 设置babel,预定义的环境
                            presets: [
                                 //指定环境插件
                                [
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    // 要兼容的目标浏览器
                                    targets:{
                                        "chrome" :"55"
                                    },
                                    // corejs的指定版本
                                    "corejs": "3",
                                    // 使用corejs的方式 usage 表示按需加载
                                    "useBuiltIns": "usage"
                                }
                                ]
                               
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件夹
                exclude: /node_modules/
            }
        ]
    },
    // 配置webpaack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin( {
               template: "./src/index.html"
            }
        ),
    ],

    // 用来设置引用模块
    resolve: {
        extensions: ['.ts', '.js']
    }
    
};

 配置完的 package.json

{
  "name": "03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.7",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.21.1",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.2",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

 配置完的 tsconfig.json

{
    "compilerOptions": {
        "module": "ES6",
        "target": "ES6",
       "strict": true
    }
}

InfinitePossibility
关注
webpack 打包ts项目_TypeScript 用 Webpack/ts-node 运行的配置记录
weixin_39649478的博客
12-20 565
公司项目代码是用 TypeScript 写的, 中间遇到有些代码不要放到 Node 里面去跑.具体场景一些路由配置, 比较大的一块 JSON 数据定义在 TypeScript 里.我另外有增加脚本, 基于这些 JSON 数据用来生成切换路由的函数.这就需要运行 TypeScript 了, 而且可能包含一些额外的业务代码.首先 Node 运行 TypeScript 有提供 ts-node 用来处理....
【学习笔记】使用webpack打包TypeScript代码
最新发布
编程小栈
02-07 681
写在前面的话。
TypeScript详解一：TS安装、初始化配置、简单数据类型
to_the_Future的博客
07-17 2267
记录下ts的一些知识，下次再见。
TypeScript初始化
m0_53912016的博客
11-19 1675
JS的讲解这里直达 安装解析ts安装包 nodejs不能直接访问ts要内部把ts转换JS 提供tsc命令 实现ts-js转换 需要在VS里面的终端npm npm i -g typescript
初始TypeScript
qq_50260510的博客
08-08 628
关于typescript的那些事
【TypeScript 配置文件】
马云
10-15 128
tsc --init 初始化ts文件，生成tsconfig.json的TS配置文件 tsc 编译文件 tsconfig.json exclude：不编译此项中的文件 include：编译此项中的文件 files：编译此项中的文件 removeComments：将注释在编译的过程中干掉 noImplicitAny：不允许隐式的声明any strictNullChecks：不允许把null赋值给其他的类型 rootDir ts文件目标 outDir：编译之后的文件目录..
typescript的基础环境搭建
qq_43498949的博客
04-16 247
ts环境搭建 typescript
react-ts-webpack-tailwind-node-setup
03-11
Webpack是一个模块打包工具，它可以将各种资源（如JavaScript、CSS、图片等）打包成一个或多个可部署的文件。Webpack的核心概念包括入口（entry）、输出（output）、加载器（loaders）和插件（plugins）。在这个项目...
react-ts webpack配置.zip
05-25
Webpack是一个模块打包工具，它可以将各种资源（如JavaScript、CSS、图片等）打包成一个或多个bundle。在`webpack.common.ts`中，可能包括了入口（entry）、出口（output）、模块规则（module rules，用于处理不同...
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
11-26
这样，经过Webpack打包后的TypeScript代码可以正确地引用Node.js模块，并且浏览器端的代码不会被意外执行。这种方法不仅适用于特定场景，还可以应用于服务端渲染的TypeScript代码打包。 然而，当项目依赖较少时，...
【TypeScript】第三部分 webpack打包TS
Trees__的博客
04-11 1048
【TypeScript】第三部分 webpack打包TS 文章目录【TypeScript】第三部分 webpack打包TS3. webpack打包TS3.1 打包步骤3.2 配置babel总结 3. webpack打包TS 3.1 打包步骤 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。 步骤: 初始化项目: npm init ,主要作用就是为了生成package.json文件 下载构建工
TpyeScript学习之路01 安装/初始化/配置编译目录/自动编译
weixin_45561719的博客
11-03 138
一，安装 npm install -g typescript 问题1 全局安装了Typescript运行环境,运行时报错: 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本 可以看此博客：https://blog.csdn.net/dujyong/article/details/106359483 二，初始化 cmd到项目目录运行 tsc --init 生成TS配置文件 tsconfig.json文件 三，
（自用）TS学习笔记之三：webpack相关配置（自动创建html、实现网页热更新、实现模块化）
shanshan的博客
03-05 543
（自用）TS学习笔记之三：webpack相关配置（自动创建html、实现网页热更新、实现模块化）
webpack3笔记
大灰狼的小绵羊哥哥的博客
07-03 704
Webpack简介Webpack 概述https://finget.github.io/2018/02/08/webpack/本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成...
TS结合webpack打包工具的使用
qq_61049986的博客
03-23 182
TS结合webpack打包工具的使用
记一次 webpack3 优化
weixin_33895657的博客
11-09 337
项目中有 500 多个 ts 文件。每次 webpack 启动 watch 都要 40 多秒。修改代码后编译也要 12-16 秒。实在是太慢了，所以尝试优化一下。 总构建时间( run build): 45672mswatch 时，修改代码后构建： 12秒 使用 webpack-visualizer 分析 webpack 都打包了什么。 ...
Webpack有哪些常见的Loader？他们是解决什么问题的？
weixin_30678349的博客
03-27 763
先来了解一下Loader，webpack是属于模块化方案，他能让任意类型的文件都能运行在浏览器中，怎么做到呢？这时就有了loader 定义: loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。 没太明白? 看下示例可能更清淅 常用的loader 这里其实没什么太大意义，无非是去看看自己项目到底用了哪些loader而已,...
前端webpack打包配置
weixin_44260446的博客
06-27 1153
webpack打包记录
TypeScript简明教程04--使用webpack打包ts文件详解
m0_55842907的博客
05-13 2306
前言：作为前端开发人员，webpack为项目开发完成打包的工具都应该了解过，简单的配置项的含义和用处是需要掌握的。对于webpack打包ts文件如何进行相关的配置是本文所需要讨论的重点。 一、初始化以及文件创建 使用npm init -y命令创建package.json文件，如下图所示： 安装webpack相关插件以及ts加载解析插件typescript-loader。 在package.json中可以看到以下的配置项，证明安装成功。 简单的配置一下tsconfig.j...
Webpack配置教程：Tsx文件处理最佳实践
Webpack是一个流行的前端打包工具，它可以将各种资源模块打包成一个或多个包，优化前端资源的加载和使用。Webpack本身不直接支持TypeScript，但是通过使用Tsx，即可实现Webpack对TypeScript代码的打包。Tsx是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值