如何使用webpack从多个脚本创建一个包?

时间:2016-08-02 16:40:49

标签: javascript module webpack

如何使用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不是函数

谢谢:)

1 个答案:

答案 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.setCatsapp.setDogs