javascript - Webpack/Babel 编译脚本

Question

我正在学习 webpack 和 babel，有些事情让我感到困惑。

在大多数情况下，我看到配置文件的输入和输出如下:

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

这一切都说得通，但是如果你想将多个 js 文件编译成 dist 怎么办？ 例如，如果您有多个正在导入和导出的 js 文件怎么办？

我知道很多人会在 React 中使用 webpack，所以会简单地使用 App.js 文件上的编译——但这通常是相同的原理吗？例如，我是否应该将所有要编译的文件导入到一个 js 文件中，然后在该文件上使用 wpack/babel？

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

非常感谢，

拉夫

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

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

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