传输文件，然后内联而不带Webpack捆绑/加载器代码

Question

我无法提出可行的解决方案。我想我应该以某种方式使用html-webpack-inline-source-plugin或多个入口点的组合，但这对我来说实在太麻烦了。

我想拥有的是：

• 我所有的js文件捆绑在一起，并注入（未内联）到index.html中[这当然可以！]
• 一个js文件，未包含在上述捆绑包中，内联到index.html中
• 内联的js文件必须通过Webpack的“转换管道”，因为该js文件取决于Webpack的构建步骤

要内联的文件的示例：

const asset = "require('./assets/blob.json')";
fetch(asset).then(.......)

此文件应first进行Webpack转换，因为实际上应内联的内容类似于：

<script>    
  var asset = "/static/json/blob.md5hashofblobjson.json";
  fetch(asset).then(.......)
</script>

因此基本上是要内联的文件取决于Webpack的构建过程，不能仅通过fs模块读取并手动将其直接直接写入index.html。

此外，内联JavaScript应该不包括任何WebpackJSONP捆绑包加载代码，仅是纯JS。在该内联JS的下面应该插入通常插入的捆绑脚本（未内联）。

我应该如何配置构建过程？谢谢你！

Answer 1

@Doug suggested a solution：

在webpack.config.js中将target设置为node（默认为web）：

module.exports = {
  target: 'node'
};

在上面的示例中，使用节点webpack将在类似Node.js的环境中编译使用（使用Node.js需要加载块并且不接触任何内置模块（如fs或path）。

或者，如果这不适合您使用，您也可以只更改libraryTarget中的output（假设您使用的是CommonJS）：

output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
    libraryTarget: 'commonjs'
},

libraryTarget：“ commonjs”-使用output.library值将入口点的返回值分配给导出对象。顾名思义，它在CommonJS环境中使用。