当我尝试使用Webpack捆绑库时，主库变量出现undefined错误。
我尝试了StackOverflow的许多不同的解决方案，例如在我的webpack.config中使用globalObject: 'this'，但是StackOverflow的解决方案似乎都不起作用。
代码非常简单，我看不出它为什么会抛出错误，但由于某种原因，它确实抛出了错误。
这是我的webpack.config：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
function gen_html_example(filename, title){
return new HtmlWebpackPlugin({
title: title,
filename: "examples/" + filename,
template: "./src/examples/" + filename,
alwaysWriteToDisk: true
})
}
module.exports = {
entry: './src/index.js',
mode: 'development',
devtool: 'inline-source-map',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: "var",
library: "sdnd",
clean: true,
},
devServer: {
static: './dist/examples',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Index',
filename: "examples/index.html",
template: "./src/examples/index.html",
alwaysWriteToDisk: true,
}),
gen_html_example("1.html", "Example #1"),
new HtmlWebpackHarddiskPlugin()
],
};源代码/索引.js：
export var test = 0;1.html:
<!DOCTYPE html>
<html>
<head>
<style>
.droppable{
background-color: lightgray;
width: 100%;
height: 50px;
cursor: move;
}
#dropzone{
width: 400px;
height: 400px;
border: 1px solid black;
padding: 5px;
box-sizing: border-box;
}
</style>
<script defer src="../main.js"></script>
</head>
<body>
<div id="dropzone">
</div>
<script>
const a = sdnd.test;
</script>
</body>
</html>当使用webpack-dev-server运行时，我在page 1.html上遇到以下错误：Uncaught ReferenceError: sdnd is not defined at 1.html:34:23
在捆绑的main.js文件中有一行sdnd = __webpack_exports__;，所以我不明白为什么它不能工作
1条答案
按热度按时间dxxyhpgq1#
* 已解决：*
我得到这个错误的原因是因为
HtmlWebpackPlugin-它向加载的脚本添加了一个defer属性，这导致了内联脚本在包加载之前被执行。