Question

我正在学习webpack和babel，这使我感到困惑。

在大多数情况下，我会看到带有输入和输出的配置文件，如下所示：

entry: { main: './src/index.js'},
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js'
    },

这完全有意义，但是如果您想将多个js文件编译成dist怎么办？例如，如果您有多个要导入和导出的js文件，该怎么办？

我知道很多人将Webpack与React一起使用，因此将仅使用App.js文件上的编译-但这通常是相同的原理吗？例如，我应该将所有要编译的文件导入到一个js文件中，然后在该文件上使用wpack / babel吗？

我希望我有道理。。。澄清一下会很棒。

非常感谢，

Raph

Answer 1

可以将Webpack配置为采用多个入口点：

entry: {
    app: "./src/scripts/app.js",
    vendor: "pathofsomeotherentrypoint"
},
output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js'
},

我们甚至可以生成多个捆绑包（每个入口点一个）。

entry: {
    app: "./src/scripts/app.js",
    vendor: "pathofsomeotherentrypoint"
},
output: {
    filename: "./dist/[name].bundle.js" 
},

上面的配置将生成两个捆绑包app.bundle.js和vendor.bundle.js

我们还可以使用全局模式匹配从目录中包含多个文件

var glob = require("glob");
// ...
entry: glob.sync("./src/scripts/*.js"),
output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js'
},

有关更多说明，请参阅参考资料。

参考：

https://medium.com/a-beginners-guide-for-webpack-2/multiple-entries-e1b3d83579bf

https://webpack.js.org/concepts/entry-points/

https://stackoverflow.com/a/34545812/2073920

Webpack / Babel编译脚本

1 个答案: