如何在 webpack 构建期间在 HTML 文档中转换脚本标签？

Question

注意：我知道 https://github.com/babel/babel-standalone#usage 并且我不是在询问有关在浏览器中转译的问题。

我想知道是否可以以下之一：

选项 1 - 在 HTML 文件中转译内容

假设我有以下 src/index.html 和一些内联 ES6:

<!-- src/index.html -->
<h1>This is some HTML stuff...</h1>
<script>
     () => console.log('I am some inline JS.');
</script>

在某种类型的构建结束后，dist/index.html 具有内联 ES5：

<!-- dist/index.html -->
<h1>This is some HTML stuff...</h1>
<script>
    function() {
        console.log('I am some inline JS.');
    }
</script>

选项 2 - 将转译的 JS 连接到 HTML 文件

假设我有以下 src 个文件：

<!-- src/index.html -->
<h1>This is some HTML stuff...</h1>

和一个包含 ES6 的 JS：

// src/index.js
() => console.log('I am some JS from another file.');

在某种类型的构建结束后得到以下 dist/index.html，它在 script 标记中将内联 ES5 连接到文件底部：

<!-- dist/index.html -->
<h1>This is some HTML stuff...</h1>
<script>
    function() {
        console.log('I am some JS from another file.');
    }
</script>

我浏览了一堆 webpack 加载器，但似乎没有一个适合这个。可能有一个非常简单的解决方案，但我错过了什么？是否有可以处理其中任何一个的 babel 插件或 webpack 加载程序。

P.S。我更喜欢选项 1 的设置。

Answer 1

Polymer 团队有一个从 html 中剥离 js 的实用程序。 Crisper。您可以使用它从脚本标签中剥离 js，然后将其提供给您的转译器，然后将其注入回 html.

如何在 webpack 构建期间在 HTML 文档中转换脚本标签？

How to transpile a script tag within an HTML document during a webpack build?

javascript

transpiler

ecmascript-6

webpack

babeljs