Javascript 提取库以分离文件

我试图在一个单独的vendor.js文件中提取库

在webpack.config.js（webpack 4）中，我执行以下操作：

entry: {
    app: './resources/assets/js/app.js',
    vendor: ['vue', 'axios']
},

output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: '[name].js',
    publicPath: './public'
}

最后，我有了app.js和vendor.js

vendor.js文件包括vue和axios

在我的html文件的最后，我添加了两个脚本：

<script src="/js/app.js"></script>
<script src="/js/vendor.js"></script>

但是app.js不知道Vue或axios。 我得到“ReferenceError:Vue未定义”

如果在html文件中将vendor.js放在app.js之前，则相同

---

我是否应该在“app.js”入口点中添加一行，以便以某种方式导入vue和axios，而不必在“app.js”输出中添加库？

拆分“供应商”区块的Webpack 4方法是通过。您可以通过

优化.splitChunks

配置路径配置此插件：

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](vue|axios)[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  }
};

也许与直觉相反，在该配置之后引用这些模块的方式保持不变；如何加载

vue

和

axios

由网页配置决定；您不必更改用于导入这些模块的任何代码

require（'vue'）

或

从“axios”导入axios

将导致从您的

vendor.js

文件中引用这些模块

最后，重新排序脚本标记，以便在加载

vendor.js

之前，

app.js

不会尝试从

vendor.js

加载内容

<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

是否尝试将供应商脚本移到应用程序脚本上方，以便首先加载？是的，同样的问题。也许我需要在“app.js”输入文件的顶部添加一些内容？您是在执行

导入

还是

要求

？如果您当前正试图以全局方式访问

Vue

，您仍然需要这些。在app.js条目中，如果我从“Vue”导入Vue，它将在我的app.js捆绑包中添加Vue。它不会使用我的“vendor.js”文件。是的，您仍然可以正常导入。此示例显示如何在单独的块中设置您想要的特定包：（只需调整

test

regexp）