如何將變量傳遞給WebPack模塊？
[英]How to pass variable to WebPack module?
問題描述
我想了解如何使用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甚至是執行此操作的正確工具嗎？
1 個解決方案
解決方案1
0 已采納 2015-10-11 05:04:07
我終於找到了解決方案。 像這樣更新webpack.config.js ：
module.exports = {
context: __dirname,
entry: {
"./src/foo.js"
]
},
output: {
library: "foo",
libraryTarget: "umd",
filename: "dst/[name].js"
}
}
如何將Django模板變量傳遞給WebPack模塊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.