Webpack打包TS

1.建文件夹以及所需要的文件

webpack.config.js中内容

const {CleanWebpackPiugin} = require('clean-webpack-plugin')

const HtmlWebpackPlugin = require ('html-webpack-plugin')

const path = require('path')

const isProd = process.env.NODE_ENV === 'production' //是否生产环境

function resolve (dir){

return path.resolve(_dirname,'..',dir)

}

module.exports = {

mode:isProd ? 'production' : 'development',

entry: {

app:'./src/main.ts'

},

output:{

path:resolve('dist'),

filename:'[name].[contenthash:8].js'

},

module:{

rules:[

{

test:/\.tsx?$/,

use:'ts-loader',

include:[resolve('src')]

}

]

},

plugins:[

new CleanWebpackPlugin({

}),

new HtmlWebpackPlugin({

template:'./public/index.html'

})

],

resolve:{

extensions:['.ts','.tsx','.js']

},

devtool:isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',

devServer:{

host:'localhost',//主机名

stats:'errors-only',//打包日志输出，输出错误信息

port:8081,

open:true

},

}

index.html内容

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width", initial-scale="1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>webpack & TS</title>

</head>

<body>

</body>

</html>

打开集成终端，鼠标右击04_webpack_ts，在终端中输入npm init -y启动终端生成配置文件

再输入tac --init生成对应的tsc对应文件

下载依赖

npm install -D typescript

npm install -D webpack webpack-cli

npm install -D webpack-dev-server

npm install -D html-webpack-plugin clean-webpack-plugin

npm install -D ts-loader

npm install -D cross-env

你在下载时可能会遇到一下情况 ,不要担心

在每条命令后添加上--legacy-peer-deps即可例如

npm install -D ts-loader --legacy-peer-deps

此处需要一点改动

改动如此

"dev":"cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",

"build":"cross-env NODE_ENV=production webpack --config build/webpack.config.js"

这样就差不多了

Webpack打包TS相关推荐

webpack 打包ts项目_使用webpack打包ts
初始化package.json npm init -y cnpm i -D webpack webpack-cli(webpack命令行工具) typescript ts-loader(整合) 2.1 ...
使用webpack打包TS的保姆级教程
最近在接触TS,还以为和js差不多,结果在打包的时候,就遇见了无数的坑. (While resolving: webpackts@1.0.0 npm ERR! Found: webpack@4.46. ...
使用webpack打包TS时遇到的问题
问题一:html-webpack-plugin与webpack版本不匹配导致的问题 //问题 TypeError: Cannot read property 'tap' of undefinedat ...
vant 引进单个样式_记一次webpack打包样式加载问题
今天是周六. 我过来加班了. 是因为一个属性问题. 俗话说一杯茶一包烟一个bug改一天感觉这句话就是特意为我准备的(我加班的时候喝奶茶,抽烟,而且就一个bug.哈哈哈哈哈哈哈哈哈哈或或或或或或或或或 ...
webpack打包工具不会用，那是因为你没看过这篇
webpack打包工具一.认识webpack 1. 前端模块化 2.打包如何理解呢? 3.和grunt/gulp的对比二.webpack的安装三.webpack的起步 1.准备工作 2.js文件 ...
前端webpack打包配置
最近在学习webpack打包,顺便做了一下笔记用来总结.后续继续补充对项目进行初始化生成package.json文件 npm init -y 通过npm或cnpm下载webpack打包工具以及ts- ...
webpack 搭建ts环境
webpack 搭建ts环境 ts 需要在typesctipt 运行 ts 运行过程: ts_–>编译为js文件->运行js 1: 安装依赖 typescript 是ts的运行环境,将ts ...
atool-build脚手架分析与webpack打包原理详解
最近要做一个js解析markdown的项目,所以当然想到了ant design,不过ant design内部又使用了atool-build脚手架,所以决定好好研究一下.如果有不对的地方还烦请指正.不过 ...
webpack打包配置
在网页中会引用那些常见的静态资源? js .js .jsx .coffee .ts(Typescript 类 C#语言) css .css .less .sass .scss images .jpg ...

Webpack打包TS

Webpack打包TS相关推荐

最新文章

热门文章