提取库以分离文件

2024-05-03 • 问答

我试图将库提取到单独的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文件中，最后添加2个脚本：

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

但是app.js不了解Vue或axios。我收到“ ReferenceError：Vue未定义”。

与将vendor.js放在html文件中的app.js之前一样。

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

Webpack 4拆分“供应商”数据块的方法是通过SplitChunksPlugin。您可以通过optimization.splitChunks的配置路径来配置此插件：

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

也许违反直觉，在配置之后引用这些模块的方式保持不变； vue和axios的加载方式由webpack配置决定；您无需更改用于导入这些模块的任何代码。 require('vue')或import axios from 'axios'将导致您的vendor.js文件中引用这些模块。

最后，重新排序脚本标签，以使app.js不会在加载vendor.js之前尝试从vendor.js加载内容。

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

提取库以分离文件

qq568957159 回答：提取库以分离文件

大家都在问