Question

如果不清楚，请再试一次。

在我的研究中，我了解到有人称之为微型装载机，这正是我想要实现的目标。在webpack配置中，我在插件部分

中有这个

  new HtmlWebpackPlugin({
    template: 'src/index.html',
    title: METADATA.title,
    chunksSortMode: 'dependency',
    metadata: METADATA,
    inject: 'head'
  }),

在编译期间会变成一个没有任何脚本标签（甚至是它们的占位符）的html文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>My angular widget</title>

  <meta name="description" content="My angular widget">

  <!-- base url -->
  <base href="/">


<link href="main.23ca1423b5f74b9e7d3a76e9eed69f71.css" rel="stylesheet"><script type="text/javascript" src="polyfills.60dbe827b1b8353af66f.bundle.js" defer></script><script type="text/javascript" src="vendor.0f040ba30b8e909c6a82.bundle.js" defer></script><script type="text/javascript" src="main.d6e9175158901f87b307.bundle.js" defer></script></head>

<body>

  <app class="skin-green gbp">
    Loading...
  </app>




</body>
</html>

它神奇地将这4个文件（1个css，3个js）添加到头部。

现在我想要的是这样的东西（angular-widget.js文件）

function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

loadCss('https://my-domain.com/app/main.1928b5b43a58428e7798d12176de68e3.css');

require(['https://my-domain.com/app/polyfills.60dbe827b1b8353af66f.bundle.js'], function() {
    require(['https://my-domain.com/app/vendor.623bbcbf99de3526eab8.bundle.js'], function() {
        require(['https://my-domain.com/app/main.d4f6aea1525a044b41da.bundle.js'], function() {
        });
    });
});

我提出的文件是我想要它做的事情，但是每次都需要手工操作并且现在使用require.js（但可以是任何东西，我都不在乎），这是只有进入点并在编译过程中自动生成，因此每次更改并重新部署时，我都不必手动更改哈希值。

- Old Post从这里开始

我有一个使用webpack进行编译的角度2项目。但我不希望入口点成为index.html，因为该应用程序将嵌入到另一个我无法完全控制的网页中。

我正在尝试找到一种方法来输出类似于index.html但在.js文件中的内容，而不是在网页上包含的内容。

www.some-domain.com/webpage

[...]
<script type="text/javascript" src="https://my-domain.com/angular-widget.js"></script>
<app>
    Loading...
</app>
[...]

有没有办法在webpack过程中生成angular-widget.js？我试图劫持HtmlWebpackPlugin，但是希望输出HTML。我对整个webpack过程相当新，但我现在的方法是一些模板，我可以输出webpack生成的不同文件，例如使用require.js。但也许整个事情甚至只能通过webpack来实现？

来自Angular 2 app webpack的小部件

0 个答案: