Vue.js / webpack 不创建构建文件？

Posted 2023-02-23

【中文标题】Vue.js / webpack 不创建构建文件？

【英文标题】：Vue.js / webpack creates no build file?

【发布时间】：2017-12-30 15:38:49

【问题描述】：

这可能是一个愚蠢的问题，但到底是什么。

我正在使用 vue-cli webpack-simple 模板，在这个项目的 webpack 配置中我发现以下内容：

output: 
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  ,

虽然没有构建文件。在运行 webpack 服务器时，我可以通过浏览器访问该文件。 build.js 文件是否只有在 webpack 开发服务器运行时可用？

这是 runtime 与 standalone 的定义吗？即使在查看了文档之后，我仍然很困惑确切的区别是什么。

我需要一个已编译的文件，因为我正在尝试发布一个已编译的文件以将我的包发布到 NPM。

干杯。

【问题讨论】：

webpack 服务器不会在磁盘上构建文件，它会在内存中完成所有工作。所以如果你想构建你需要执行“npm run build”。

@itacode 是否可以创建一个副作用以便它也将文件写入磁盘？

【参考方案1】：

运行

npm run build

这将创建一个包含build.js 的/dist 目录。

您可以在package.json 中查看可运行的脚本。 webpack-simple 模板只有run 和build。您需要复制 index.html 和 dist 文件夹。

当您使用npm run dev 进行开发时，您正在使用热模块重新加载，并且没有构建通过热模块服务器可用的临时js。

如果您只想构建一个文件组件，您可以使用vue-cli 的build command。

vue build Component.vue --prod --lib Component

其中Component 是单个文件组件的名称。这将生成一个仅包含您指定的组件的脚本文件。在您的 HTML 中包含该脚本并使用 `Vue.component("component", Component) 全局公开它。

【讨论】：

啊，我猜 webpack 在使用 vue-cli 项目时会因为热重载而在内存中运行所有内容？我只想转换一个组件（首先）什么是最简单的方法？我刚刚尝试过，构建文件包含所需的所有代码，而我只需要转换我创建的组件。

@Stephan-v 有两种方法可以轻松地将单个组件构建到脚本文件中。 vue-cli 有一个可以使用的build 命令。此外，编写 cli 的 build 部分的同一个人编写了一个名为 poi 的工具，它也可以做到这一点。

最后一个问题，你有什么转译多个组件甚至一个 Vuex 模块的技巧吗？