2016-08-02 79 views
0

如何使用webpack从几个脚本制作一个包?我试图指出几个条目,但只包括最后,其他只是没有看到如何功能。如何使用webpack从几个脚本制作一个包?

这是我的APP1:

function setCats() { 
    alert('cat'); 
} 

exports.setCats = setCats; 

我APP 2:

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 Uncaught TypeError: app.setCats is not a function

谢谢:)

回答

0

这很简单,你只能加载在一个的WebPack输出束一个切入点。如果使用多个,它们全部被加载,但只导出最后的入口点。这通常用于在库之前加载polyfills,例如,因为它们不会导出任何内容。

做你想做的事,你应该简单地做,你这样做的另一个更高层次的文件:

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

+0

非常感谢) –

相关问题