为什么webpack生成的代码被执行两次?

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

[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。

谢谢。

这真的是你所有的代码吗，或者可能是在你的代码中，你导入了一个模块两次略有不同的类型?例如:

import {myFunc} from './myScriptFile.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曾经在HTML中使用脚本标签<script src="./myScriptFile.js" type = "module"></script>导入，并且曾经在'myClass.js'文件中被引用，但这次没有文件扩展名。

相关内容

最新更新

热门标签：