Как передать переменную в модуль WebPack?
Я пытаюсь понять, как использовать 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 правильным инструментом для этого?
Решение
Я наконец нашел решение. Обновите webpack.config.js как это:
module.exports = {
context: __dirname,
entry: {
"./src/foo.js"]
},
output: {
library: "foo",
libraryTarget: "umd",
filename: "dst/[name].js"}
}
Другие решения
Других решений пока нет …