Nuxt（和 Webpack）：如何分离单个 JS 文件以供外部应用程序重用？答案

【问题标题】：Nuxt (and Webpack): How to separate a single JS file to be reused by external app?Nuxt（和 Webpack）：如何分离单个 JS 文件以供外部应用程序重用？
【发布时间】：2020-02-04 09:04:04
【问题描述】：

我偶然发现了几页关于将外部文件导入 Nuxt 项目的内容，但我想做的恰恰相反。

我有两个站点或应用程序：站点 A 和站点 B。站点 A 是使用 Nuxt 构建的主要站点。站点 B 是一个带有静态页面的简单站点，不使用 Nuxt 或 Vue。

站点 A 有一个 JavaScript 文件，假设它的路径是 /lib/common.js。我在站点 A 上广泛使用它。我也想在站点 B 上使用它。

但是，当我在站点 A 上执行 yarn generate 时，我的所有 JS 文件，包括 common.js，都被捆绑到一个 JavaScript 块文件中，并且每个文件都以文件内容的哈希命名。例如，/lib/common.js、/lib/util.js 捆绑为/dist/_nuxt/05443d2eb25fc282bbea.js，而/lib/user.js 捆绑为/dist/_nuxt/1326d0fc90870f9f4ca4.js。

这意味着：

我要使用的文件实际上与其他文件捆绑到同一个包中，所以如果我加载该文件，我必须加载额外的代码，并且，
我真的无法预测该文件的名称。

有没有办法让我告诉 Nuxt，或者最有可能是 Webpack，将 /lib/common.js 挑出到它自己的包中，然后将其保存为 /dist/_nuxt/lib/common.js 而不是哈希，这样文件名更容易预测？

【问题讨论】：

标签： javascript webpack nuxt.js

【解决方案1】：

您需要为该单个文件创建单独的 webpack 配置以实现所需的结果，因为每个配置文件仅支持一个输出配置[0]。

[0]https://github.com/webpack/docs/wiki/configuration#output

示例常用库配置common.lib.config.js

var path = require('path');

module.exports = {
  entry: './lib/common.js',
  output: {
    path: path.resolve(__dirname, 'dist/_nuxt/lib'),
    filename: 'common.js'
  }
};

并使用webpack --config common.lib.config.js 构建它

【讨论】：

是的，这也是我昨天走的路线。我认为这也是最好的方法。谢谢！