通过 webpack 使用远程入口答案

【问题标题】：Using a remote entry with webpack通过 webpack 使用远程入口
【发布时间】：2020-06-20 18:33:38
【问题描述】：

我正在尝试在服务器环境中设置一个 webpack 配置，该配置可以从远程源输出一个包。源是一个 .js 文件，将通过 GET 请求获取。这可能吗？

远程文件 - example.com/file.js

export default () => console.log('Hello world');

带有伪代码的 Webpack

const remoteSource = await fetchFromURL('http://example.com/file.js');

webpack({
  entry: remoteSource,
  output: {
    filename: 'output.js',
    path: path.resolve(__dirname, 'src'),
    libraryTarget: "umd",
  }
})

感谢任何想法！

【问题讨论】：

这对我来说似乎是一个 XY 问题。为什么你甚至需要这个？无论哪种方式，如果您希望模块解析工作，那将非常（非常）困难。否则，当然，您可以将整个内容包装在异步函数中，将获取的字符串写入文件，然后将该文件名用作 webpack 的输入。丑陋，但它有效。
你知道是否可以在 fetch 之后编译字符串然后传递给 webpack 吗？主要是为了避免写文件
如果你没有模块解析，你为什么还要使用模块捆绑器？你可以创建一个内存文件系统并从那里加载，但此时你应该质疑你使用 webpack 的原因。
这个用例比我提出的例子要复杂一些，所以我理解其中的困惑，但是技术问题仍然存在，是否可以从远程源构建捆绑包。我觉得除了您的第一条评论之外，还有其他选择

标签： node.js webpack fetch bundle

【解决方案1】：

我已经四处寻找解决方案，但您是唯一给我提示的人。所有其他提案均基于externals，这在我的情况下无效。我完成了使用一个单独的 JS 文件，该文件负责将所需的文件下载到本地目录中。然后 WebPack 扫描该目录并将下载的文件与应用程序捆绑在一起。

download.js

const https = require('https');
const fs = require('fs');

const download = (url, dest, callback) => {
    let file = fs.createWriteStream(dest);
    https.get(url, function(response) {
        // noinspection JSUnresolvedFunction
        response.pipe(file);
        file.on('finish', function() {
            file.close();
            callback();
        });
    });
}

download('http://www.mycdn.com/my-file.js', './generated-soruces/src/js/', () => {
    console.log('Downloaded File!')
});

package.json

...
"clean": "rimraf dist",
"clean:all": "rimraf dist node_config node_modules",
"build": "export NODE_ENV=dev && npm run clean && node ./download.js && webpack",
...

【讨论】：