如何在静态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