webpack打包基本配置

需要的文件

具体代码

webpack.config.js

javascript 复制代码
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

bash 复制代码
{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "strict": true,
  }
}

package.json

bash 复制代码
{
  "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

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

typescript 复制代码
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)

m1.ts

typescript 复制代码
export const hi='你好啊'
相关推荐
木易 士心1 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js
程序员博博1 小时前
概率与决策 - 模拟程序让你在选择中取胜
前端
被巨款砸中2 小时前
一篇文章讲清Prompt、Agent、MCP、Function Calling
前端·vue.js·人工智能·web
sophie旭2 小时前
一道面试题,开始性能优化之旅(1)-- beforeFetch
前端·性能优化
Cache技术分享2 小时前
204. Java 异常 - Error 类:表示 Java 虚拟机中的严重错误
前端·后端
uhakadotcom2 小时前
execjs有哪些常用的api,如何逆向分析网站的加签机制
前端·javascript·面试
ObjectX前端实验室2 小时前
【图形编辑器架构】:无限画布标尺与网格系统实现解析
前端·canvas·图形学
你的电影很有趣2 小时前
lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南
前端·npm·node.js
闲蛋小超人笑嘻嘻3 小时前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app
小牛itbull3 小时前
初始化electron项目运行后报错 electron uninstall 解决方法
前端·javascript·electron