时间戳

首页 > 解决方案 > 了解 Webpack 配置：多个入口点

webpack - 了解 Webpack 配置：多个入口点

问题描述

我正在研究这个名为 Apache Superset 的开源项目。由于我想为其前端做出贡献，因此我试图了解它的前端组件如何组合在一起并形成一个应用程序。

我对 Webpack 的了解很浅，但我知道这是了解前端组件如何协同工作的一个很好的起点。

在本项目的 Webpack 配置文件中（https://github.com/apache/incubator-superset/blob/master/superset-frontend/webpack.config.js），

const config = {
  node: {
    fs: 'empty',
  },
  entry: {
    theme: path.join(APP_DIR, '/src/theme.ts'),
    preamble: PREAMBLE,
    addSlice: addPreamble('/src/addSlice/index.tsx'),
    explore: addPreamble('/src/explore/index.jsx'),
    dashboard: addPreamble('/src/dashboard/index.jsx'),
    sqllab: addPreamble('/src/SqlLab/index.tsx'),
    crudViews: addPreamble('/src/views/index.tsx'),
    menu: addPreamble('src/views/menu.tsx'),
    profile: addPreamble('/src/profile/index.tsx'),
    showSavedQuery: [path.join(APP_DIR, '/src/showSavedQuery/index.jsx')],
  },
....

我看到有多个入口点被一些名为addPreamble.

首先，我不确定当有多个入口点时这个应用程序是如何工作的。以我非常基础的知识，我认为 Webpack 是用于创建一个单独的包以使项目更易于加载。如果它有多个入口点，它将如何工作？

其次，我不确定为什么我们需要该addPreamble函数来包装模块的位置。它有什么作用，它的意义是什么？

很难找到这个项目的文档，所以如果有人能提供帮助，那就太好了。

谢谢

标签： webpack

解决方案

有了多个入口点，webpack 将输出多个包，而不仅仅是一个包。根据您的用例，HTML 页面可以只加载它需要的页面，甚至可以加载所有捆绑包。

关于addPreamble函数，从这里的源代码中可以看到https://github.com/apache/incubator-superset/blob/master/superset-frontend/webpack.config.js#L159，这是一个返回数组的简单函数. 在 webpack 中，您可以将多个模块传递给 entry，例如：

entry: {
  vendors: ['react', 'react-dom'],
  main: ['./src/a.js', './src/b.js']
}

这addPreamble就是我所知道的。

推荐阅读