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='你好啊'
相关推荐
cypking16 分钟前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵23 分钟前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆38 分钟前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七1 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03011 小时前
vue3笔记(2)自用
前端·javascript·笔记
德育处主任Pro2 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端
拾光拾趣录2 小时前
setTimeout(1) 和 setTimeout(2) 的区别
前端·v8
拾光拾趣录2 小时前
内存泄漏的“隐形杀手”
前端·性能优化
摸鱼仙人~2 小时前
HttpServletRequest深度解析:Java Web开发的核心组件
java·开发语言·前端
索西引擎2 小时前
【工程化】浅谈前端构建工具
前端·webpack·gulp·turbopack