2024年Web前端最新Vue 打包 chunk-vendors，web前端CSS全局样式

在Vue项目中，通常我们会将第三方库（如Vue、Vue Router等）和自定义组件的样式文件进行分离，并在构建时将它们打包成单独的chunk，以便于利用浏览器的缓存机制。

以下是如何配置Vue CLI项目中的webpack配置，以实现这一点：

1. 修改vue.config.js文件（如果项目中没有这个文件，则需要手动创建它）。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 分离chunk-vendors
    config.optimization.splitChunks({
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        // 分离CSS到单独的文件
        styles: {
          name: 'styles',
          test: /\.(sa|sc|c)ss$/,
          chunks: 'all',
          enforce: true
        }
      }
    });
 
    // 配置外部CSS
    config.plugin('extract-css').tap(() => [{
      filename: 'styles/[name].[contenthash:8].css',
      chunkFilename: 'styles/[name].[contenthash:8].css'
    }]);
  }
};

在这个配置中，我们使用config.optimization.splitChunks来分离node_modules中的库到chunk-vendors。同时，通过config.plugin('extract-css')配置将CSS从JS文件中分离出来，并且指定了输出的文件名格式。

2. 确保你的Vue组件中正确引入CSS（例如使用<style>标签）。

<template>
  <!-- Your template here -->
</template>
 
<script>
export default {
  // Your component options here
};
</script>
 
<style scoped>
/* Your scoped CSS here */
</style>

使用scoped属性确保CSS只作用于当前组件。

这样配置后，你的项目将会生成一个chunk-vendors文件，其中包含了第三方库的代码，以及一个或多个CSS文件，这些文件将被放置在styles目录下，并且会根据组件的变化进行缓存。