草庐IT

javascript - Webpack 插件 : How to add dynamically a Module to the main Chunk?

coder 2025-01-19 原文

我正在开发一个 Webpack 插件，它基本上在 block 中寻找 css Assets ，当它找到这样的 Assets 时，在其上应用一些返回的 postCSS 插件2 个输出，一个应该继续使用 Extract-Text-Plugin 提取，另一个输出应该成为 chunk 中的一个新模块在运行时将其注入(inject)头部。

我唯一没有设法实现的部分是在现有 block 中创建新模块 的部分。有什么指点/想法吗？

我设法从中创建了一个新 block ，但没有 webpack 包装器，这意味着我无法为那 block css 支持 HMR 并延迟加载它。 

class ExtractTPAStylePlugin {
  constructor(options) {
    this._options = Object.assign({
      pattern: [
        /"\w+\([^\)]+\)"/
      ]
    }, options);
  }

  extract(compilation, chunks) {
    const promises = [];

    chunks.forEach((chunk) => {
      promises.push(
        chunk.files
          .filter(fileName => fileName.endsWith('.css'))
          .map(file => postcss([extractStyles(this._options)])
            .process(compilation.assets[file].source(), {from: file, to: file})
            .then((result) => {
              compilation.assets[file] = new RawSource(result.css);

              const filename = file.replace('.css', fileSuffix);
              const newChunk = new Chunk(filename);
              newChunk.files = [filename];
              newChunk.ids = [];
              compilation.chunks.push(newChunk);
              const extractedStyles = `(${addStylesTemplate})()`
                .replace('__CSS__', JSON.stringify(result.extracted))
                .replace('__ID__', file);
              compilation.assets[filename] = new OriginalSource(extractedStyles);
            }))
      );
    });

    return Promise.all(promises);
  }

  apply(compiler) {
    compiler.plugin('compilation', (compilation) => {
      compilation.plugin('optimize-chunk-assets', (chunks, callback) => {
        this.extract(compilation, chunks)
          .then(() => callback())
          .catch(callback);
      });
    });
  }
}

module.exports = ExtractTPAStylePlugin;

最佳答案

好的，所以我设法从几个插件中收集了一些代码，成功的解决方案是将加载器注入(inject)一些伪造的导入文件，在该加载器中将整个 js 代码加载到主包中，然后将optimize-chunk-assets 阶段结果的一些占位符。

之后，在optimize-chunk-assets中，可以找到相关的chunk，使用ReplaceSource查找并替换占位符。

如需灵感，您可以查看 plugin .

关于javascript - Webpack 插件 : How to add dynamically a Module to the main Chunk?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49088183/

dynamicallyjavascriptcompilationstrongcodewebpackextracttextwebpackpluginwebpack-plugin

有关javascript - Webpack 插件 : How to add dynamically a Module to the main Chunk?的更多相关文章

  1. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  2. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  3. ruby-on-rails - 您希望看到哪些 Rails 插件？ - 2

    您认为可以作为插件很好地存在于您的Rails应用程序中必须实现的哪些行为？您过去曾搜索过哪些插件功能但找不到？哪些现有的Rails插件可以改进或扩展，如何改进或扩展？ 最佳答案 我希望在管理界面中看到一个引擎插件，它提供了应用程序中所有模型的仪表板摘要，以及可配置的事件图表。 关于ruby-on-rails-您希望看到哪些Rails插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questio

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - vagrant 从 github 安装插件 - 2

    我们正在使用Vagrant进行部署，我们最终希望将此集群部署在Rackspace上。vagrant-rackspace插件是一个自然的选择，但它有一些错误，这些错误未包含在最新的0.1.1版本中(notablythatvagrantprovisiondoesn'twork)。我已经在我的personalfork中解决了这个问题通过合并其他人的工作来对存储库进行改造。是否可以从github安装vagrant插件？显而易见的事情没有奏效:[unix]$vagrantplugininstallvagrant-rackspace--plugin-sourcehttps://github.com

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. IDEA使用LeetCode插件 - 2

    前言我们习惯用idea编写、调试代码，在LeetCode上刷题时，如果能够在IDEA编写代码，并且做好代码管理，是一件事半功倍的事情。对于后续复习题目，做笔记也会非常便利。本文目的在于介绍LeetCodeEditor的使用，以及配置工具类，最终目录结构如下：note：放置笔记src：放置代码leetcode.editor.cn：插件LeetCodeEditor自动生成utils：自定义的工具包，可用于自动化输入测试用例，定义题目需要的类（结构体）out：运行测试时自动生成LeetCodeEditorGitHub：https://github.com/shuzijun/leetcode-edit

  8. regex - Ruby 是否有类似于 Perl 6 语法的插件？ - 2

    多年来，Perl一直是我首选的编程语言工具之一。Perl6语法看起来像是一个很棒的语言特性。我想知道是否有人开始为Ruby做这样的事情。 最佳答案 如果您想在Ruby中使用实际的Perl6语法，最好的选择是Cardinal，Parrot上的ruby​​编译器。它目前尚未完成并且非常缓慢，但我非常希望它最终成为一个可行的ruby​​实现。它目前大部分处于非事件状态，等待Parrot中的一些基础架构更改以支持改进的解析速度和其他功能。 关于regex-Ruby是否有类似于Perl6语法的插件

  9. ruby-on-rails - 你为 Rails 推荐哪个状态机插件？ - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion我正在为Rails3/ActiveRecord项目寻找一个相对简单的状态机插件。我做了一些研究并提出了以下插件:转换:https://github.com/qoobaa/transitions从旧的ActiveRecord状态机库中提取

  10. ruby-on-rails - 使用模块扩展带有 "has_many"的插件中的模型 - 2

    我在引擎样式插件中有一些代码，其中包含一些模型。在我的应用程序中，我想扩展其中一个模型。通过在初始值设定项中包含一个模块，我已经设法将实例和类方法添加到相关模型中。但是我似乎无法添加关联、回调等。我收到“找不到方法”错误。/libs/qwerty/core.rbmoduleQwertymoduleCoremoduleExtensionsmoduleUser#InstanceMethodsGoHere#ClassMethodsmoduleClassMethodshas_many:hits,:uniq=>true#nomethodfoundbefore_validation_on_crea

随机推荐