webpack 和 ts 简单配置及使用

这篇具有很好参考价值的文章主要介绍了webpack 和 ts 简单配置及使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

如何使用webpack 与 ts结合使用
新建项目 ,执行项目初始化

npm init -y

会生成

{
  "name": "tsdemo01",
  "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.4.4",
    "typescript": "^5.1.6",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

安装依赖 :
-D 开发依赖 等价于 --save-dev

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

根目录下新建webpack.config.js,webpack的配置文件

// 引入path库 用于拼接路径
const path =  require('path')
//webpack 所有配置信息都写在module.exports中
module.exports={
	// 指定入口文件
	entry: './src/index.ts',
	// 指定打包文件所在目录
	output:{
		// 指定打包文件的目录
		path:path.resolve(__dirname,'dist'),
		//打包后的文件 出口
		filename:"bundle.js"
	},
	// 指定webpack打包时要使用的模块
	module:{
		// 指定要加载的规则
		rules:[
			{	
				//test 指定的是规则生效的文件 以ts结尾的文件
				test:/\.ts$/,
				// 要使用的loader
				use:'ts-loader',
				//要排除的文件
				exclude:/node-modules/			
			}
		]
	}
}

在根目录下 新建tsconfig.json

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

在package.json 的scripts中添加

"build":"webpack"

都配置好后,执行 npm run build
在目录下看到dist文件,就是成功拉!
webpack 和 ts 简单配置及使用,webpack,typescript

在项目中,需要在页面中引入js使用,
html-weback-plugin是自动生成html文件,并且自动引入相关资源

npm i -D html-webpack-plugin

配置的webpack.config.js

// 引入path库 用于拼接路径
const path = require('path');
// 引入html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin');

//webpack 所有配置信息都写在module.exports中
module.exports = {
  // 指定入口文件
  entry: './src/index.ts',
  // 指定打包文件所在目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, 'dist'),
    //打包后的文件 出口
    filename: 'bundle.js',
  },
  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        //test 指定的是规则生效的文件 以ts结尾的文件
        test: /\.ts$/,
        // 要使用的loader
        use: 'ts-loader',
        //要排除的文件
        exclude: /node-modules/,
      },
    ],
  },
  plugins: [
    new HTMLWebpackPlugin({
      title: '我是自定义title',
    }),
  ],
};

再执行 npm run build 时,目录会变更
webpack 和 ts 简单配置及使用,webpack,typescript
如果想有个模板,可以在src下新增一个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>我是模板</title>
</head>
<body>
  <div id="box1">我是模板的div1</div>
</body>
</html>

在webpack.config.js中,把title 换为template

// 引入path库 用于拼接路径
const path = require('path');
// 引入html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin');

//webpack 所有配置信息都写在module.exports中
module.exports = {
  // 指定入口文件
  entry: './src/index.ts',
  // 指定打包文件所在目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, 'dist'),
    //打包后的文件 出口
    filename: 'bundle.js',
  },
  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        //test 指定的是规则生效的文件 以ts结尾的文件
        test: /\.ts$/,
        // 要使用的loader
        use: 'ts-loader',
        //要排除的文件
        exclude: /node-modules/,
      },
    ],
  },
  plugins: [
    new HTMLWebpackPlugin({
      // title: '我是自定义title',
      template: './src/index.html',
    }),
  ],
};

执行打包 npm run build 就会出现下图:
webpack 和 ts 简单配置及使用,webpack,typescript
可使用webpack-dev-server 对代码进行实时的编译监控
下载:npm i -D webpack-dev-server
在package.json中配置scripts 中新增 “start”: “webpack serve --open”

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },

执行 npm run start
当代码修改,检查到后,页面会实时的进行更新

打包清空上一次内容:可使用 clean-webpack-plugin
写法与html-webpack-plugin相同
webpack.config.js文件:

// 引入path库 用于拼接路径
const path = require('path');
// 引入html-webpack-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

//webpack 所有配置信息都写在module.exports中
module.exports = {
  // 指定入口文件
  entry: './src/index.ts',
  // 指定打包文件所在目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, 'dist'),
    //打包后的文件 出口
    filename: 'bundle.js',
  },
  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        //test 指定的是规则生效的文件 以ts结尾的文件
        test: /\.ts$/,
        // 要使用的loader
        use: 'ts-loader',
        //要排除的文件
        exclude: /node-modules/,
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      // title: '我是自定义title',
      template: './src/index.html',
    }),
  ],
  // 设置引用模块
  resolve: {
    // 以.ts 和.js为结尾的扩展名文件可以做模板使用
    extensions: ['.ts', '.js'],
  },
};

比如src下另有一个item1.ts

export const hi = '你好';

想在index.ts引入,

import { hi } from './item1';
let a: string;
a = 'aaa';
console.log(a);
function sum(a: number, b: number): number {
  return a + b;
}
console.log(sum(211, 234));
console.log('hi----', hi);

直接引入,打印,在npm run build 时,会报错
解决方法是webpack.config.js配置下

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

写上这个就可以在ts中引入其他ts文件中的变量
再次打包 npm run build 就不会报错了
webpack 和 ts 简单配置及使用,webpack,typescript

就执行成功拉文章来源地址https://www.toymoban.com/news/detail-657299.html

到了这里,关于webpack 和 ts 简单配置及使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • webpack配置alias后eslint和ts无法识别

    我们在 webpack 配置 alias 后,发现项目中引入的时候,还是会报错,如下: 可以看到,有一个是 ts报错,还有一个是 eslint 报错。 tsconfig.json 方式一:关闭规则 .eslintrc.js 【推荐】方式二:使用 eslint-import-resolver-alias .eslintrc.js 使用方式二鼠标点击后还可以跳转到对应的文件中

    2024年02月07日
    浏览(28)
  • React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)

    在 Vue 项目当中,可以使用  @  来表示  src/ ,但在 React 项目中,默认却没有该功能,因此需要进行手动的配置来实现该功能。 别名主要解决的问题:每个页面都使用路径的方式进行引入,这样很麻烦,效率很低,这个时候可以配置一个别名,来直接使用别名引入。 使用

    2024年02月09日
    浏览(45)
  • 使用webpack建立React+TS项目

    之前写过类似的文章,这次看到一本新书里也介绍了这个知识点,故尝试之。 Refer: 《Learn React With TypeScript - A Beginner\\\'s Guide To Reactive Web Development With React 18 and TypeScript》chapter3 Creating a project with webpack 1.先建立一个空的文件夹,my-app,并用vscode打开然后到根目录底下创建packa

    2024年02月14日
    浏览(43)
  • Vite4+Typescript+Vue3+Pinia 从零搭建(2) - ts配置

    项目代码同步至码云 weiz-vue3-template 关于tsconfig的配置字段可查看其他文档,如 typeScript tsconfig配置详解 文件修改如下: 修改文件如下: 新建文件夹 types ,用来存放类型定义。比如新建 index.d.ts : 后续也可以新增其他文件,比如 global.d.ts 存放全局定义, router.d.ts 存放路由定

    2024年02月05日
    浏览(85)
  • 使用webpack5+TypeScript+npm发布组件库

            作为一只前端攻城狮,没有一个属于自己的组件库,那岂不是狮子没有了牙齿,士兵没有了武器,姑娘没有了大宝SOD蜜,你没有了我....         言归正传,下面将给大家介绍如何通过webpack5编译一个TS组件发布到NPM平台。         1、通过webpack5初始化一个typescript环

    2024年04月16日
    浏览(40)
  • 【解决方案】使用WebStorm运行TypeScript文件(基于ts-node)

    本文章内 所有WS代表WebStorm; 所有TS代表TypeScript。 首先呢,我也算是TS的初学者。相信作为过来人都清楚,新手刚刚上手TS的时候,配置环境是多么痛苦的一件事情。并且,我就很好奇,为什么网上教程、参考文档、甚至专业书籍,铺天盖地都是使用的是VScode编写的。(难道

    2024年02月09日
    浏览(48)
  • 面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?

    面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们? 在TypeScript中,装饰器( Decorators )是一种用于增强代码功能的特殊类型声明。装饰器提供了一种在类、方法、属性等代码元素上注释或修改的方式,使得我们可以通过装饰器来扩展、修改或监视代码的

    2024年02月15日
    浏览(57)
  • Webpack5新手入门简单配置

    yarn init -y   yarn add -D webpack@5.75.0 webpack-cli@5.0.0 说明:写入下面的一句话 说明:如果没有安装webpack脚手架就不能执行yarn webpack(webpack-cli) yarn webpack  说明:为yarn webpack起别名  yarn build 说明:注释写在了代码里面了

    2024年02月14日
    浏览(53)
  • webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts

    报错如下: 解决方式,先查看自己的 node 版本 然后再安装 @types/node 对应版本,比如我的如下 然后再次打包,就没有报错了

    2024年02月04日
    浏览(52)
  • webpack简单的搭建和使用

    随便创建一个空的文件夹,例如说:explore 然后我们测试一下我们的node是否存在  可以正确打印出版本 我们再次输入:npm init -y 创建一个package.json文件  出现这样的情况就成功了 然后我们要安装webpack在终端上输入命令:  npm i webpack webpack-cli --save-dev 我们再去创建一个src文件

    2024年02月06日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包