webpack打包基本配置

news2025/6/1 7:31:06

需要的文件

在这里插入图片描述

具体代码

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)