Question

我正在制作一个React库。我正在用两个文件构建库，第一个是“ csj” ，第二个是“ esm” 。

在package.json中，“主要” 指向“ csj” ，而“模块” 指向“ esm “ 。

Answer 1

使用webpack时必须提供一个名为webpack.config.js的配置文件。此配置文件具有一个 entry字段，该字段指向您应用程序的入口点，按照惯例，通常是index.js文件。 entry字段的语法如下：

Usage: entry: string|Array<string>

string|Array<string>意味着可以根据需要提供一个文件作为应用程序的入口点，也可以提供多个文件作为应用程序的入口点。

那为什么这么重要？

webpack会从您的entry点建立一个依赖关系图，以创建最终的JavaScript捆绑包。通过构建依赖关系图，我的意思是：

“每当一个文件依赖于另一个文件时，webpack都将其视为依赖关系。Webpack递归地构建一个依赖关系图，其中包括应用程序需要的每个模块，然后捆绑所有这些模块分成少数捆包-通常只有一个捆包-由浏览器加载。”

以您的示例为例，由于您的csj.js文件需要/导入您的esm.js文件，因此只需将csj.js文件指定为应用程序中的entry点您的webpack.config.js文件。这将允许webpack“自动 ”获取这两个文件的代码库，因为它将在其生成的依赖关系图中列出这些依赖关系。

一个简单的webpack.config.js文件可能如下所示：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './csj.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

简而言之，它与package.json字段无关，而是从entry文件中指定的webpack.config.js点创建代码束。

希望有帮助！

我怎么知道webpack或汇总正在获取“模块”或“主”字段？

1 个答案: