我打算使用 webpack 捆绑我所有的 .js。 我尝试了一个非常简单的示例，如下所示。
捆绑在 test.js 文件中的函数:
function test() {
console.log('hello');
}
网络包配置:
module.exports = [{
{
output: {
filename: 'test.js',
path: __dirname + '/public/javascript/dist'
},
entry: [
'./public/javascript/test.js'
]
}
]
测试代码:
<html>
<head></head>
<body>
<script src="./javascript/dist/test.js"></script>
<script type="text/javascript">
window.onload = function()
{
test();
}
</body>
</html>
但我收到以下错误:Uncaught ReferenceError: test is not defined.
问题:为什么？
[编辑] 响应是:缺少“导出”。 多亏了这一点，我更新如下:
要导出的代码:
export function Test() {
this.t = 1;
Test.prototype.toto = function()
{
console.log('hello')
}
}
Webpack 配置文件:
{
output: {
filename: 'test.js',
path: __dirname + '/public/javascript/dist',
library: 'test',
libraryTarget: 'window'
},
entry: [
'./public/javascript/poc/test.js'
]
}
要创建对象，我必须这样做:var t = new test.Test(); 有点重...有没有办法只需要 make : var t = new Test(); ？
最佳答案
why?
因为您没有从入口点导出任何内容，而且默认情况下，webpack 会生成 umd 格式的输出，而不会污染全局范围。
您首先必须导出您的函数:
export default function test() {
console.log('hello');
}
然后在您的 webpack 配置中指定“library”和“libraryTarget”。 Docs .例如:
output: {
filename: 'test.js',
path: __dirname + '/public/javascript/dist',
library: 'test',
libraryTarget: 'window',
libraryExport: 'default'
},
这将生成添加 window.test = _entry_return_.default 的代码。
关于javascript - 如何使用 webpack 导出函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45817227/