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)

本地使用ts配置的更多相关文章

  1. Centos6.4 本地yum源配置

    由于单位的服务器均使用的是内网,而安装一些软件如Git,需要很多的依赖包,使用yum安装相对简单,由于不能联网故配置本地yum源配置. 1.首先将需要rpm库添加到系统中: 1).虚拟机中安装的lin ...

  2. bat批处理文件启动Eclipse和ivy本地仓库的配置

    一.bat批处理文件启动Eclipse 所需文件: 1.eclipse 2.jre 3.startup-eclipse.bat 确保以上三个文件夹同级 startup-eclipse.bat: set ...

  3. 本地Git环境配置

    在Git Bash下获取源码时,提示permission denied publickey. 原因是本地帐号配置不正确,解决办法 生成SSH文件 1,进入Git Bash 2,  输入下面文字 ssh ...

  4. RedHat和CentOS使用本地yum源配置

    2013-04-01 11:38:30 标签:本地yum源 版权声明:原创作品,谢绝转载!否则将追究法律责任. 使用yum命令安装所需的软件,如果设备网络状况很好,当然也没必要去配置本地yum源,直接 ...

  5. oracle如何连接别人的数据库，需要在本地添加一些配置

    2.oracle如何连接别人的数据库,需要在本地添加一些配置 1.找到 listener.ora 文件,打开(一般在 C 文件夹) ORCL = (DESCRIPTION = (ADDRESS = ( ...

  6. VUE请求本地数据的配置json-server

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  7. 远程代码仓库URL地址变更后本地仓库的配置方法

    作者:荒原之梦 原文链接:http://zhaokaifeng.com/?p=556 今天修改了一个远程仓库的项目名称,导致Git仓库的地址发生了变化,Push代码时显示"Git仓库找不到& ...

  8. VUE开发请求本地数据的配置，旧版本dev-server.js，新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  9. 本地Maven环境配置

    本地Maven环境配置 下载配置文件:http://10.1.10.138:6060/root/DevelopmentSpecification/archive/master.zip 解压master ...

  10. CentOS7利用本地yum源配置NBD

    一:CentOS7.0创建本地YUM源 (物理机:直接将刻录的CentOS7光盘利用光驱插入物理机上) (虚拟机: CD/DVD>>连接本地ISO) 针对物理机192.168.9.112进 ...

随机推荐

  1. java 携带session 前台传递cookie 跨域解决方案 vue + java

    前台 axios 设置 withCredentials: true 后台设置 跨域 header("Access-Control-Allow-Origin","源地址&q ...

  2. base64 转文件上传

    // 将base64转换为blob dataURLtoBlob (dataurl) { let arr = dataurl.split(',') let mime = arr[0].match(/:( ...

  3. 【图算法】图卷积的演变-从谱图卷积到GCN

    基础 傅里叶变换 傅里叶级数是对周期为T的确定性信号做展开,而傅里叶变换将周期推广到无穷,能对具有任意长度的信号做展开. 傅里叶级数和傅里叶变换是什么关系? 如下为傅里叶变换公式: \[\hat{f} ...

  4. Github账号开启账号双重验证

    原文: Github开启双重验证 - Stars-One的杂货小窝 今天在浏览开源项目的时候,突然Github有个提示我要在9月18日前开启双重验证,说是不完成的话,到时候的Github账号会受到限制 ...

  5. Welcome to YARP - 3 负载均衡 (Load Balancing)

    目录 Welcome to YARP - 1.认识YARP并搭建反向代理服务 Welcome to YARP - 2.配置功能 2.1 - 配置文件(Configuration Files) 2.2 ...

  6. .NET开源免费的Windows快速文件搜索和应用程序启动器

    前言 今天大姚给大家分享一款.NET开源(MIT License).免费.功能强大的Windows快速文件搜索和应用程序启动器:Flow Launcher. 工具介绍 Flow Launcher 是一 ...

  7. Oracle regexp_replace 手机号脱敏

    select '18012345678',regexp_replace('18012345678','(.){4}','****',4,1) from dual;

  8. Oracle 备份 还原 导入 导出 数据库

    导出数据 SQL> conn / as sysdba Connected. SQL> create directory lxw_dir as '/home/oracle'; Directo ...

  9. NetAdapt：MobileNetV3用到的自动化网络简化方法 | ECCV 2018

    NetAdapt的思想巧妙且有效,将优化目标分为多个小目标,并且将实际指标引入到优化过程中,能够自动化产生一系列平台相关的简化网络,不仅搜索速度快,而且得到简化网络在准确率和时延上都于较好的表现   ...

  10. KingbaseES自动生成列介绍

    在KingbaseES中create table语句支持GENERATED column(生成列). 生成列是一种特别的列类型,它的值基于其他列的值计算得出.因此,生成列之于列,有点像视图之于表的关系 ...