当前位置：首页 > news >正文

webpack打包基本配置

news 2025/5/30 10:59:07

需要的文件

在这里插入图片描述

具体代码

webpack.config.js

const path = require('path');const HTMLWebpackPlugin = require('html-webpack-plugin');const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {mode: 'production',entry: "./src/index.ts",output: {path: path.resolve(__dirname, './dist'),filename: "bundle.js",environment: {arrowFunction: false}},module: {rules: [{test: /\.ts$/,use: [{loader: 'babel-loader',options: {"presets": [["@babel/preset-env",{"targets": {"browsers": ["ie 11"]},"corejs": 3, // 注意这里应该是数字 3，而不是字符串 "3""useBuiltIns": "usage" // 注意大小写，是 "useBuiltIns" 而不是 "useBuiltins"}]]}},'ts-loader',],exclude: /node_modules/,}]},plugins: [new CleanWebpackPlugin(),new HTMLWebpackPlugin({template: "./src/index.html"})],resolve: {extensions: ['.ts', '.tsx', '.js']}
}

tsconfig.json

{"compilerOptions": {"target": "es2015","module": "es2015","strict": true,}
}

package.json

{"name": "part3","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","start": "webpack serve --open"},"keywords": [],"author": "","license": "ISC","description": "","devDependencies": {"@babel/core": "^7.27.3","@babel/preset-env": "^7.27.2","babel-loader": "^10.0.0","clean-webpack-plugin": "^4.0.0","core-js": "^3.42.0","html-webpack-plugin": "^5.6.3","ts-loader": "^9.5.2","typescript": "^5.8.3","webpack": "^5.99.9","webpack-cli": "^6.0.1","webpack-dev-server": "^5.2.1"}
}

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">This is a template
</div>
</body>
</html>

index.ts

import {hi} from './m1'function sum(a:number, b:number):number {return a + b;
}const  obj={name:"孙悟空",age:33}
console.log(obj)obj.age=18;
console.log(obj)console.log(sum(123,456))
console.log(sum(123,2))
console.log(hi)console.log(Promise)