Question

我目前正在开发一个插件，可以根据最大文件大小阈值将一个块拆分成多个块。

例如，考虑一个工作流程，即将100个JavaScript文件合并到一个带有webpack的bundle.js文件中。

我当前的插件非常简单，看起来有点像这样（用coffeescript编写）：

CHUNK_SIZE_MODIFIERS = {
    chunkOverhead: 1
    entryChunkMultiplicator: 1
}

module.exports = class
    constructor: (@fileSize) ->

    apply: (compiler) ->
        maxFileSize = @fileSize
        compiler.plugin('compilation', (compilation) ->
            compilation.plugin('optimize-chunk-assets', (chunks) ->
                chunks.slice().forEach((chunk) ->
                    return if chunk.size(CHUNK_SIZE_MODIFIERS) <= maxFileSize

                    totalChunks = 1
                    currentChunk = createChunk("#{chunk.name}#{totalChunks}")
                    chunk.modules.forEach((module, idx) ->
                        if module.size() + currentChunk.size(CHUNK_SIZE_MODIFIERS) > maxFileSize and currentChunk.modules.length > 0
                            totalChunks++
                            currentChunk = createChunk("#{chunk.name}#{totalChunks}")

                        currentChunk.addModule(module)
                        module.addChunk(currentChunk)
                    )

                    chunk.remove('empty')
                    chunks.splice(chunks.indexOf(chunk), 1)
                )
            )
        )

不幸的是，这种方法实际上似乎并不适用于我，因为其中一个模块本质上是__webpack_require__所有其他模块的模块。此模块最终会失败，因为它现在会查找存在于单独块中的模块ID。

我尝试使用CommonsChunkPlugin一点来看看如何创建一个新的块，但我目前的实现并没有解决上面提到的问题。有没有办法重建一个块，一旦它被拆分，将正确地重新生成所提到的模块？或者在模块被拆分成新块后我可以做些什么呢？

编写一个按文件大小拆分块的Webpack插件

0 个答案: