时间戳

首页 > 解决方案 > webpack：如何在 YAML 文件中注入 JS 块

javascript - webpack：如何在 YAML 文件中注入 JS 块

问题描述

我正在使用 webpack 对遗留的 MVC 应用程序进行现代化改造（symfony 1.4）

我想在包含其他几个设置的 YAML 文件中注入 JS 块和 CSS 文件。

这是一个例子：

default:
   foo: bar
   .
   .
   stylesheets: [ style.db80006f5e14f38456ef.css ]
   javascripts: [ runtime.d8969ec83f67a36c8877.js, npm.material.db07856eff6817abe7f2.js, main.db80006f5e14f38456ef.js ]
   .
   .

html-webpack-plugin支持插件也是如此。我想知道是否可以使用我自己的插件html-webpack-plugin将 CSS 文件和 JS 文件注入 YAML 文件而不是 HTML 模板。我不确定这html-webpack-plugin是否可行，因为我不想操作 HTML 文件。

也许还有另一种可能性来获取 JS 块的名称和顺序，以及 CSS 文件。

提前非常感谢！

标签： javascriptwebpackhtml-webpack-plugin

解决方案

html-webpack-plugin是要走的路，你可以提供你的“基础”yaml文件作为模板，并提供一个templateContent函数来生成你的yaml内容。

像这样的东西：

new HtmlWebpackPlugin({
  templateContent: function(params) {
    return `
default:
   stylesheets: [ ${params.htmlWebpackPlugin.files.css.join(',')} ]
   javascripts: [ ${params.htmlWebpackPlugin.files.js.join(',')} ]
`;
  },
  filename: 'path-to/where/to/save/your.yaml',
  inject: false, // prevents from the plugin to auto-inject html tags
});

推荐阅读