Question

我试图理解，如何使用WebPack将我所有模块特定的JS源捆绑到一个文件中。对于这个示例，我只使用一个JS文件。

通常我会像这样写我的JavaScript和HTML：

foo.js

var foo = function (className) {
  this.className = null;

  this.init(className)
}

foo.prototype = {
  "init": function (className) {
    this.className = className
  },

  "render": function () {
    var o = document.createElement("span")

    o.setAttribute("class", this.className)
    o.textContent = "foo's className is " + this.className

    return o
  }
}

的index.html

<html>
<head>
    ...
    <script src="foo.js"></script>
</head>
<body>
    ...
    <div id="foobar"></div>
    <script>
        ;(function () {
            var className = "bar"
            var o = new foo(className)

            document.getElementById("foobar").appendChild(o.render())
        })()
    </script>
    ...
</body>
</html>

大多数情况下，脚本部分由PHP应用程序注入，变量的值将来自某些后端代码。

现在我试图将我的JS代码与WebPack捆绑在一起。 webpack.config.js 如下所示：

module.exports = {
  context: __dirname,
  entry: {
    bundle: [
      "./src/foo.js"
    ]
  },

  output: {
    filename: "dst/[name].js"
  }
}

我更新 foo.js 文件：

...
module.exports = foo

现在我使用 webpack -p 编译捆绑包，然后我更改HTML以包含新的bundle.js并且需要 foo 。

的index.html

<html>
<head>
    ...
    <script src="dst/bundle.js"></script>
</head>
<body>
    ...
    <div id="foobar"></div>
    <script>
        ;(function () {
            var foo = require("foo")
            var className = "bar"
            var o = new foo(className)

            document.getElementById("foobar").appendChild(o.render())
        })()
    </script>
    ...
</body>
</html>

但现在我得到以下错误：

ReferenceError: requrie is not defined
    var foo = requrie("foo")

如何使此代码与WebPack一起使用？ WebPack甚至是正确的工具吗？

Answer 1

我终于找到了解决方案。像这样更新 webpack.config.js ：

module.exports = {
  context: __dirname,
  entry: {
      "./src/foo.js"
    ]
  },

  output: {
    library: "foo",
    libraryTarget: "umd",
    filename: "dst/[name].js"
  }
}

如何将变量传递给WebPack模块？

1 个答案: