Question

我偶然发现了几篇有关将外部文件导入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而不是哈希，因此文件名更多可预测的？

Answer 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

进行构建

Nuxt（和Webpack）：如何分离单个JS文件以供外部应用重复使用？

1 个答案: