本地使用ts配置

1.需要安装的依赖

   "dependencies": {
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.2.6",
    "ts-node": "^10.4.0",
    "tslib": "^2.3.1",
    "typescript": "^4.4.4",
    "webpack": "^5.60.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack serve"
  },

2. webpack.config.js配置

 const path = require('path').resolve(__dirname, './dist')
const htmlWebpackPlugin = require('html-webpack-plugin')
 
module.exports = {
  // 需要添加模式,否则报错
  mode: 'development',
  // 完整相对路径
  entry: './src/main.ts',
  output: {
    path,
    filename: 'bundle.js'
  },
  resolve: {
    // 只匹配ts会导致 无法正常运行js代码
    extensions: ['.ts', '.js', '.cjs', '.json']
  },
  // 使用ts-loader
  module: {
    // 规则是一个数组
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  },
  plugins: [
    // 插件需要 通过new 进行使用
    new htmlWebpackPlugin({
      template: './index.html'
    })
  ]
}

3.index.html 模板文件

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ts Learn</title>
    <script src="./src/main.ts"></script>
  </head>
  <body></body>
</html>

5. 文件结构

6.遇到问题

 扩展规则少了 js文件的匹配
Module not found: Error: Can't resolve './log' in '/Users/zdz/Desktop/LearnCode/learn-code/Ts/node_modules/webpack/hot'
 
htmlWebpackPlugin需要通过new构造使用
ypeError: Class constructor HtmlWebpackPlugin cannot be invoked without 'new'
    at Object.<anonymous> (/Users/zdz/Desktop/LearnCode/learn-code/Ts/webpack.config.js:28:5)

posted @ 2024-04-15 09:46 story.Write(z) 阅读(22) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 项目搭建基本配置与规范

· nuxt使用介绍[学习记录]

· ts重点学习142-使用webpack打包ts文件笔记

· ts基础配置

· ts09_使用webpack打包ts文件2

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

test

昵称： story.Write(z)
园龄： 10个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

coderzdz

个人记录

本地使用ts配置

1.需要安装的依赖

2. webpack.config.js配置

3.index.html 模板文件

5. 文件结构

6.遇到问题

公告

搜索

常用链接

随笔分类 (83)

随笔档案 (81)

阅读排行榜

推荐排行榜

	"dependencies": {
	"html-webpack-plugin": "^5.5.0",
	"ts-loader": "^9.2.6",
	"ts-node": "^10.4.0",
	"tslib": "^2.3.1",
	"typescript": "^4.4.4",
	"webpack": "^5.60.0",
	"webpack-cli": "^4.9.1",
	"webpack-dev-server": "^4.4.0"
	},
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"build": "webpack",
	"serve": "webpack serve"
	},

	const path = require('path').resolve(__dirname, './dist')
	const htmlWebpackPlugin = require('html-webpack-plugin')

	module.exports = {
	// 需要添加模式,否则报错
	mode: 'development',
	// 完整相对路径
	entry: './src/main.ts',
	output: {
	path,
	filename: 'bundle.js'
	},
	resolve: {
	// 只匹配ts会导致无法正常运行js代码
	extensions: ['.ts', '.js', '.cjs', '.json']
	},
	// 使用ts-loader
	module: {
	// 规则是一个数组
	rules: [
	{
	test: /\.ts$/,
	loader: 'ts-loader'
	}
	]
	},
	plugins: [
	// 插件需要通过new 进行使用
	new htmlWebpackPlugin({
	template: './index.html'
	})
	]
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>ts Learn</title>
	<script src="./src/main.ts"></script>
	</head>
	<body></body>
	</html>

	扩展规则少了 js文件的匹配
	Module not found: Error: Can't resolve './log' in '/Users/zdz/Desktop/LearnCode/learn-code/Ts/node_modules/webpack/hot'

	htmlWebpackPlugin需要通过new构造使用
	ypeError: Class constructor HtmlWebpackPlugin cannot be invoked without 'new'
	at Object.<anonymous> (/Users/zdz/Desktop/LearnCode/learn-code/Ts/webpack.config.js:28:5)