Vue Cli 3 - 编译 web 组件时在 dist 中包含 js 文件

Question

我正在开发一个使用 Vue Cli 3 创建的项目，并且一直在使用 Vue Web 组件。

我需要创建一个需要不同库的加载程序文件（称为 loader.js）。

require(‘.node_modules/…/…/library.js’);
require(‘.node_modules/…/…/script.js’);

我使用这个命令来编译 web 组件：

vue-cli-service build --target wc --name widget ./src/components/widget.vue

此时我需要的是，在构建 web 组件时，webpack 还会处理 loader.js 文件并将所有内容打包require到 dist 文件夹中。

我是 webpack 的新手，我不知道如何解决这个问题。我尝试使用 CopyWebpackPlugin 但它只复制了 loader.js 文件并且不包含 require 文件。

module.exports = {
plugins: [
  new CopyWebpackPlugin(
    [
      {
        from: 'src/loader.js',
        to: '.',
      },
    ],
  ),
],
}

我该如何解决这个问题？

Answer 1

如果是静态js文件，可以将其添加到public文件夹中

文件public夹

放置在该文件夹中的任何静态资源public都将被简单地复制，而不会通过 webpack。您需要使用绝对路径引用它们。

源代码： https: //cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

如果它是和/或具有依赖项，那么在主代码中使用 import 会将其包含在捆绑包中。