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='你好啊'
相关推荐
柯腾啊35 分钟前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇39 分钟前
ts 定义重复对象字段
前端
HashTang1 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
前端架构师-老李2 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡2 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
用户21496515898753 小时前
从零搭建uniapp环境-记录
前端
努力写代码的熊大4 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER4 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh5 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒5 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端