1.安装Webpack
npm install webpack webpack-cli --save-dev
2.安装ts-loader
npm install ts-loader --save-dev
3.安装Webpack插件
//自动生成html文件
npm install html-webpack-plugin --save-dev
//修改后保存dist中文件自动更新
npm install clean-webpack-plugin --save-dev
4.webpack搭建服务器
搭建服务器后可随时修改文件,保存即可自动编译。
npm install --save-dev webpack
5.安装babel
npm i -D @babel/core @babel/preset-env babel-loader core-js
6.配置webpack
webpack.config.js:
const path = require("path")
const HTMLWebpackPlugin = require("html-webpack-plugin")
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指定的是规则生效的文件
test: /\.ts$/,
//要使用的loader
use:[
//配置babel
{
//指定加载器
loader: "babel-loader",
//设置babel
options:{
//设置预定义的环境
presets:[
[
//指定环境的插件
"@babel/preset-env",
//配置信息
{
//要兼容的目标浏览器
targets:{
"chrome": "88"
},
//指定corejs的版本
"corejs":"3",
//使用corejs的方法 "usage"表示按需加载
"useBuiltIns":"usage"
}
]
]
}
},
"ts-loader",
],
//要排除的文件
exclude: /node-module/
}
]
},
//配置webpack插件
plugins:[
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
template: "./src/index.html"
}),
],
//用来设置引用模块
resolve:{
extensions: ['.ts', '.js']
}
}
package.json:
需要配置script中的几项。
{
"name": "ts-dev",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack serve --open chrome.exe"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"nodemon": "^2.0.12",
"typescript": "^4.3.5"
},
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"core-js": "^3.16.4",
"html-webpack-plugin": "^5.3.2",
"ts-loader": "^9.2.5",
"webpack": "^5.49.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}