为什么 webpack 生成的代码会被执行两次？答案

【问题标题】：why is webpack generated code getting executed twice?为什么 webpack 生成的代码会被执行两次？
【发布时间】：2022-03-16 19:48:00
【问题描述】：

浏览器控制台显示代码执行了两次：

    [HMR] Waiting for update signal from WDS...
    index.ts:1 WebPack - Learn - begin
    log.js:24 [HMR] Waiting for update signal from WDS...
    index.ts:1 WebPack - Learn - begin
    2index.js:519 [webpack-dev-server] Hot Module Replacement enabled.
    2index.js:519 [webpack-dev-server] Live Reloading enabled.

如您所见，“WebPack - Learn - begin”执行了两次。

webpack.config.js


    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const path = require('path');
    
    module.exports = {
        entry: './src/index.ts',
        devtool: 'inline-source-map',
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader',
                    exclude: /node_modules/
                }
            ]
        },
        resolve: {
            extensions: ['.ts', '.js', '.tsx']
        },
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
    
        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, "src", "index.html")
            })
        ],
    
        devServer: {
            static: './dist'
        }
    };

tsconfig.json


    {
        "compilerOptions": {
            "outDir": "./dist/",
            "noImplicitAny": true,
            "module": "es6",
            "moduleResolution": "node",
            "sourceMap": true,
            "target": "es6",
            "typeRoots": [
                "node_modules/@types"
            ],
            "lib": [
                "es2017",
                "dom"
            ]
        }
    }

index.ts


    console.log("WebPack - Learn - begin")

index.html


    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>WebPack - Learn</title>
    
        <style>
            body {
                font-family: 'Arial';
                background: #ececec;
            }
    
            ul {
                list-style-type: none;
                padding: 20px;
            }
    
            li {
                padding: 20px;
                background: white;
                margin-bottom: 5px;
            }
        </style>
    </head>
    
    <body>
        <ul id="output"></ul>
    
        <script src="/bundle.js"></script>
    </body>
    
    </html>

package.json


    {
      "name": "TestWebPackServer02",
      "version": "1.0.0",
      "description": "https://www.valentinog.com/blog/webpack/",
      "main": "index.js",
      "scripts": {
        "dev": "webpack --mode development --watch",
        "start": "webpack serve --mode development --open"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/xyz/TestWebPackServer02.git"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "bugs": {
        "url": "https://github.com/xyz/TestWebPackServer02/issues"
      },
      "homepage": "https://github.com/xyz/TestWebPackServer02#readme",
      "devDependencies": {
        "html-webpack-plugin": "^5.3.2",
        "rxjs": "^7.3.0",
        "ts-loader": "^9.2.5",
        "typescript": "^4.4.3",
        "webpack": "^5.52.1",
        "webpack-cli": "^4.8.0",
        "webpack-dev-server": "^4.2.1"
      }
    }

stackOverflow 抱怨说我的帖子主要包含代码并想要更多细节。因此，我在底部添加此文本以满足 stackOverflow。

谢谢。

【问题讨论】：

标签： javascript typescript webpack duplicates execution

【解决方案1】：

这真的是您所有的代码吗，还是在您的代码中您两次导入一个模块，但类型略有不同？举个例子：

import {myFunc} from './mySrciptFile.js';

对

import {myFunc} from './myScriptFile';

我遇到过这样一种情况，即在没有文件扩展名的情况下编写的 import 语句导致该文件上存在的函数之外的代码被加载并执行两次。

// myScriptFile.js
import * as MYCLASS from './myClass.js';
function myFunc(){
  // Do whatever...
}
export {myFunc};

// This code is executed when the script file is loaded
console.log("Start setup");
let myVar = new MYCLASS.MyClass();

导致以下输出：

Start setup    myScriptFile.js:9
Start setup    myScriptFile:9

这是因为 myScriptFile 曾经以带有脚本标签 <script src="./myScriptFile.js" type = "module"></script> 的 HTML 格式导入，并且曾经在 'myClass.js' 文件中被引用，但这次没有文件扩展名。

【讨论】：

感谢您的回答，但这是我的全部代码