如何在靜態html文件中包含webpack塊？

Question

我有webpack將所有單獨的JS組件構建到捆綁組件中.bundle.js

組件示例：

export class Comp1 {
  test() {
    console.log('worked');
  }
};

然后，我有一個靜態的html頁面，其中包含我的components.bundle.js，但是我不知道該如何使用這些組件，因為我認為自己可以做以下事情：

<html>
<head>
    <script type="text/javascript" src="./components.bundle.js" charset="utf-8"></script>
</head>
<body>
    <script>
        var comp1 = new Comp1();

        comp1.test();
    </script>
</body>

但這不起作用，我想念什么？ 謝謝！

Answer 1

運行webpack並獲取bundle.js之后，您可以簡單地將其添加為腳本，如下所示：

<script src="path/to/my/bundle.js"></script>

您要執行的所有操作（例如，創建此類的實例並訪問其成員）以及您希望合並到項目中的任何其他邏輯都應按照在提供的代碼示例中所做的相同方式編寫，也就是說，應遠離包含bundle.js的實際HTML。 您可以通過創建更多文件來實現此目的，這些文件將保存並引用您編寫的其他邏輯。

要點是，不建議在布局頁面內處理業務邏輯。

例如：

寫錯

export class Comp1 {
  test() {
    console.log('worked');
  }
};

像這樣訪問

<html>
  <head>
    <script type="text/javascript" src="./components.bundle.js" 
    charset="utf-8"></script>
  </head>
  <body>
    <script>
      var comp1 = new Comp1();
      comp1.test();
    </script>
  </body>
</html>

正確寫

  export class Comp1 {
    test() {
      console.log('worked');
    }
  };

並像這樣訪問（很可能在另一個.js文件中，例如main.js ）

var comp1 = require('path/to/my/component')

comp1.test()

這里的要點是您的代碼必須是獨立的。 功能（可以正常工作）（不需要HTML），它必須執行所需的所有任務，而無需注入任何東西。 在大多數情況下，注入HTML文件僅應在瀏覽器中提供此邏輯，以便能夠直觀地看到其效果。

如何在靜態html文件中包含webpack塊？

問題描述

1 個解決方案

解決方案1
0 2017-12-01 03:40:30

如何在靜態html文件中包含webpack塊？

問題描述

1 個解決方案

解決方案1 0 2017-12-01 03:40:30

解決方案1
0 2017-12-01 03:40:30