标题
用webpack打包运行TS详细教程[zt]
clq
浏览(244) +
2022-10-18 11:02:37 发表
编辑
关键字:
https://blog.csdn.net/weixin_51564923/article/details/122959980
用webpack打包运行TS详细教程
马德里甜欣
于 2022-02-16 11:37:56 发布 1977
收藏 5
文章标签： typescript webpack javascript
版权
首先下载依赖，在集成终端打开后：
npm init -y
tsc --init 产生对应的ts.config.js文件
npm install -D typescript
npm install -D webpack@4.41.5 webpack-cli@3.3.10
npm install -D webpack-dev-server@3.10.2 启动开发服务器的
npm install -D html-webpack-plugin@4.0.0-alpha clean-webpack-plugin 对html内容进行打包 / 清除之前打包好的js文件
npm install -D ts-loader@8.0.11 针对ts文件进行编译处理
npm install -D cross-env 涉及跨平台命令
配置打包命令：
"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"
创建build文件夹里面webpack.config.js配置如下：
const {CleanWebpackPlugin} = 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'), //将打包好的文件放到dist目录里面
filename: '[name].[contenthash:8].js' //产生的js文件是以app加上8位的哈希值.js来命名的
},
module: {
rules: [ //rules主要是通过ts-loader这个包针对于ts文件，针对src目录里面的ts和tsx文件进行编译处理操作
{
test: /\.tsx?$/,
use: 'ts-loader',
include: [resolve('src')]
}
]
},
plugins: [
new CleanWebpackPlugin({ //会将dist目录中以前打包的js文件进行清楚
}),
new HtmlWebpackPlugin({ //针对于./public/index.html进行打包的
template: './public/index.html'
})
],
resolve: {
extensions: ['.ts', '.tsx', '.js'] //针对于'.ts', '.tsx', '.js'这三种文件进行处理引入文件可以不写他的扩展名
},
//针对于代码的错误提示
devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',
devServer: {
host: 'localhost', // 主机名
stats: 'errors-only', // 打包日志输出输出错误信息
port: 8081, //端口
open: true //自定打开浏览器
},
}
最后创建src目录下的main.ts:
document.write('Hello Webpack TS!')
npm run dev后在主页面中成功查看hellowebpackTS就说明成功运行啦~
NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.
