vue3怎么将css文件和js文件分别打包到一个.js文件和.css文件中

在Vue 3中，通常使用Webpack作为模块打包工具来管理CSS和JS的分离打包。Webpack可以配置不同的插件和规则来处理这些任务，例如`MiniCssExtractPlugin`用于提取CSS，`CommonsChunkPlugin`用于提取公共模块。

以下是一个简单的步骤说明：

1. **安装依赖**：
首先确保已经安装了Vue CLI和必要的Webpack插件：

   npm install -D @vue/cli@latest webpack webpack-cli mini-css-extract-plugin css-loader style-resources-loader vue-template-compiler

2. **修改配置**：
在`.vue`组件的目录下创建一个`vue.config.js`（如果没有就新建），并添加以下内容，配置CSS分割和提取：

   module.exports = {
     chainWebpack: config => {
       config.module
         .rule('extract-css')
           .test(/\.css$/)
           .use('mini-css-extract-plugin')
             .loader('mini-css-extract-plugin.loader')
           .end()
         .set('resourceQuery', 'minify') // 使用 minify 版本以压缩CSS
       config.optimization.splitChunks({
         chunks: 'all', // 提取所有公共模块
         cacheGroups: {
           styles: { // 专门针对样式文件的优化
             name: 'styles', // 自定义名称
             test: /\.css$/,
             priority: 1000, // 先提取
             enforce: true,
             filename: (async () => {
               const filename = require.context('./src/assets/styles', false, /\.css$/).toString();
               return filename.match(/^(.*\/)?[^?]+(\?.*)?$/) || './styles/[name].css';
             })(),
         },
       });
     }
   };

3. **处理全局样式**：
如果有全局样式，可以在项目的`src/assets/styles/global.css`或其他地方添加，并使用`style-resources-loader`加载：

   // src/main.js 或者其他入口文件
   import { createApp } from 'vue';
   import App from './App.vue';
   import resources from './assets/styles/global.css';

   // 将全局CSS导入并应用
   require资源;
   
   createApp(App).mount('#app');

完成以上设置后，运行构建命令（如`npm run build`或`yarn build`）会生成单独的`main.js`和`manifest.js`（包含CSS）文件。