在Webpack中的查询

huangapple go评论70阅读模式
英文:

Query in webpack

问题

我正在尝试创建一个库(使用TypeScript和Webpack)。这个库旨在供不同的Angular应用程序使用。

每个应用程序可能不会使用相同的功能集,因此库被拆分为多个部分(针对每个功能),使用Webpack的entry功能。现在,库被拆分为(例如)main.jsfunc1.jsfunc2.js等。在这里,main.js是应用程序必须与一个或多个所需功能库一起使用的最小库(组合的使用基于应用程序)。我已经实现了期望的拆分,但共同模块在每个块中都有重复,导致应用程序大小增加。

为了避免重复,我使用了Webpack的optimization.splitChunks,如下所示。

optimization: {
    splitChunks: {
        common: {
            name: 'common',
            chunks: 'initial',
            minChunks: 2
        }
    }
}

该选项避免了重复并创建了一个名为common.js的新文件,其中包含所有共同模块。

现在,我需要将common.jsmain.js(我们的第一个块,必须要被使用)合并在一起,而不是将它作为一个独立的文件。这是否可行?如果是的话,怎么做?

英文:

I am trying to make a library (using typescript and webpack). The library is intended to be used by different angular applications.

Every application may not consume same set of functionalities and thus the library is split into multiple ones (for every functionality) using webpack's entry. Now, the library is split as (say) main.js, func1.js, func2.js, etc. Here, main.js is the minimum library an application has to consume along with one or more required functionality libraries (combination of consumption is based on application). I achieved the expected splitting, but the common modules are duplicated in every chunk and resulted in increase in application size.

To avoid duplication, I used webpack's optimization.splitChunks, as follows.

optimization {
    splitChunks: {
        common: {
            name: 'common',
            chunks: 'initial',
            minChunks: 2
        }
    }
}

The option avoided duplication and created a new file, named common.js, with all common modules.

Now, I need the common.js to be merged with main.js (our first chunk, a must-to-be-consumed one), instead of it being a separate file. Is this achievable? If so, how?

答案1

得分: 0

我再次执行webpack以合并common.jsmain.js,得到的main.js使用以下配置:

entry: {
    'main': ['common.js', 'main.js']
}

通过这种方式,我实现了我的需求。如果有其他意见,请发表。

英文:

I execute webpack again to merge common.js and main.js, to result in main.js using config as follows,

entry: {
    'main': ['common.js', 'main.js']
  }

By this way I achieve my requirement. If any other opinion exist, please post.

huangapple
  • 本文由 发表于 2020年1月7日 01:25:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/59616405.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定