Question

我打算使用webpack捆绑所有.js。我尝试了一个非常简单的例子如下。

捆绑在test.js文件中的函数：

function test() {
  console.log('hello');
}

Webpack配置：

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>

但是我收到以下错误：未捕获的ReferenceError：未定义测试。

问题：为什么？

[编辑]回复是：“导出”丢失。多亏了这一点，我更新如下：

要导出的代码：

export function Test() {
  this.t = 1;

  Test.prototype.toto = function()
  {
    console.log('hello')
  }
}

Webpack conf：

{
output: {
  filename: 'test.js',
  path: __dirname + '/public/javascript/dist',
  library: 'test',
  libraryTarget: 'window'
},
entry: [
  './public/javascript/poc/test.js'
]
}

要创建对象，我必须这样做：var t = new test.Test（）; 它有点沉重......有没有办法只需要制作：var t = new Test（）; ？

Answer 1

为什么？

因为您没有从入口点导出任何内容，并且默认情况下，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的代码。

如何使用webpack导出功能

1 个答案: