Question

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

谢谢：）

Answer 1

很简单，您只能在一个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。

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

1 个答案: