生成 package.json 文件
终端运行
npm init -y
package.json 文件
{
"name": "code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
}
生成 tsconfig.json 文件
终端运行，生成 ts 配置文件
tsc --init
创建 html 文件
新建目录 public
创建 html 文件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>Document</title>
</head>
<body>
</body>
</html>
创建 ts 文件
新建目录 src
创建 ts 文件main.ts
(() => {
alert('打包成功啦~~~~')
})()
创建 webpack.config.js 文件
新建目录./build
创建 Js 文件 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 文件名格式
},
module: {
rules: [
{ // 对 src 目录下的 ts 文件编译操作
test: /\.tsx?$/,
use: 'ts-loader',
include: [resolve('src')]
}
]
},
plugins: [
new CleanWebpackPlugin({ // 把以前打包的 js 清除
}),
new HtmlWebpackPlugin({
template: './public/index.html' // 当前目录的 html 打包
})
],
resolve: {
extensions: ['.ts', '.tsx', '.js'] // 引入这类文件 可以不写扩展名
},
devtool: isProd ? 'cheap-module-source-map' : 'eval-cheap-module-source-map', // 提示错误信息
devServer: {
host: 'localhost', // 主机名
port: 8081,
open: true // 自动打开浏览器
},
}
下载依赖
npm install -D typescript
npm install -D webpack webpack-cli webpack-dev-server
// 打包 html 和 清除之前打包的 js
npm install -D html-webpack-plugin clean-webpack-plugin
// 对 ts 文件进行编译处理
npm install -D ts-loader
# 涉及跨平台的命令
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"
运行 打包
// 开发环境 打包测试 npm run dev // 生产环境打包 npm run build
版权声明：《 【TypeScript】使用 webpack 打包 TypeScript 》为明妃原创文章，转载请注明出处！
最后编辑:2022-3-8 11:03:29