如何使用webpack从多个脚本创建一个包?我试图指出几个条目,但仅包括最后一个,其他只是没有看到函数。
这是我的app1:
function setCats() {
alert('cat');
}
exports.setCats = setCats;
我的app2:
function setDogs() {
alert('dog');
}
exports.setDogs = setDogs;
我的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="bin/app.bundle.js" charset="utf-8"></script>
</head>
<body>
<script>app.setCats()</script>
<script>app.setDogs()</script>
</body>
</html>
我的webpack.config.js:
module.exports = {
entry: {
app: [
'./src/app1.js',
'./src/app2.js',
]
},
output: {
path: './bin',
filename: 'app.bundle.js',
library: 'app'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
},
};
在浏览器中构建并运行后,只有狗和控制台警告我有这个错误:
index.html:8未捕获的TypeError:app.setCats不是函数
谢谢:)
答案 0 :(得分:0)
很简单,您只能在一个webpack输出包中加载一个入口点。如果使用多个,则它们都已加载,但仅导出最后一个入口点。例如,这通常用于在库之前加载polyfill,因为它们无论如何都不会导出任何东西。
要执行您想要执行的操作,您只需创建另一个更高级别的文件:
var setCats = require('./app1.js').setCats;
var setDogs = require('./app2.js').setDogs;
module.exports = {
setCats: setCats,
setDogs: setDogs,
};
然后只使用该文件作为单个入口点(entry: './src/app.js'
)。构建它之后,捆绑的库将工作并包含app.setCats
和app.setDogs
。