时间戳

首页 > 解决方案 > Nuxt（和 Webpack）：如何分离单个 JS 文件以供外部应用程序重用？

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

问题描述

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

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

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

但是，当我yarn generate在站点 A 上执行此操作时，我的所有 JS 文件（包括common.js. 例如，/lib/common.js捆绑/lib/util.js为/dist/_nuxt/05443d2eb25fc282bbea.jswhile/lib/user.js捆绑为/dist/_nuxt/1326d0fc90870f9f4ca4.js.

这意味着：

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

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

标签： javascriptwebpacknuxt.js

解决方案

您需要为该单个文件创建单独的 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

推荐阅读