关闭 css 的单独块，vue cli 3 webpack 4答案

【问题标题】：Turn off seperate chunks for css , vue cli 3 webpack 4关闭 css 的单独块，vue cli 3 webpack 4
【发布时间】：2019-07-11 21:23:58
【问题描述】：

我正在使用使用最新版本的 vue cli 3 创建的项目。我使用的是默认配置，我的路由器有很多动态导入的路由。在生产中运行时，我的 css 和 js 都被分成多个块。虽然 js 的行为是可取的。我的 css 文件很小，我想关闭 css 的块。

如何通过 vue.config.js 文件配置 webpack 以执行此操作。请帮助使用确切的命令，因为我发现 webpack 配置和链语法非常混乱。谢谢:)

【问题讨论】：

标签： vue.js webpack-4 vue-cli-3 mini-css-extract-plugin

【解决方案1】：

在项目vue.config.js 的根目录中创建一个文件

我也使用了一些其他选项，但您需要的是这个。

const path = require('path');

module.exports = {
  lintOnSave: true,
  filenameHashing: false,
  chainWebpack: config => {
    config.optimization.delete('splitChunks')
  }
};

这将删除创建的块，并让您只使用CSS 和JS 的单个文件。

filenameHashing: false 这部分将删除文件上的散列。
config.optimization.delete('splitChunks') 这将删除块。

更具体地满足您的要求。

使用这些配置

module.exports = {
  lintOnSave: true,
  filenameHashing: false,
  configureWebpack: {
    optimization: {
      cacheGroups: {
        default: false,
        // Merge all the CSS into one file
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
      },
    }
  }
};

通过这种方式，您的 JS 代码将被拆分成块，但 CSS 文件将被合并为一个。

更多如果你想配置你的 JS 块，你可以使用这些设置。

module.exports = {
  lintOnSave: true,

  filenameHashing: false,
  configureWebpack:{
    optimization: {
      cacheGroups: {
        default: false,
        // Custom common chunk
        bundle: {
          name: 'commons',
          chunks: 'all',
          minChunks: 3,
          reuseExistingChunk: false,
        },
        // Customer vendor
        vendors: {
          chunks: 'initial',
          name: 'vendors',
          test: 'vendors',
        },
        // Merge all the CSS into one file
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
      },
    }
  }
};

【讨论】：

我只想删除 css 的分割块，同时保留 js 的分割块
更新答案请稍候
@JunaidFarooq 看来您的出色答案适用于 Webpack 3，但不再与 Webpack 4 兼容。cacheGroups 不再是有效的配置对象。你有没有机会发布一个 Webpack 4 的等价物？
是的，为什么不我会在晚上晚些时候调查它。你觉得可以吗？
使用 WebPack 4，您必须将 cacheGroups 移动到 splitChunks 对象中。这是一个有效的配置，但它似乎不起作用。

【解决方案2】：

对于Webpack 4，你可以看到这个例子（vue.config.js）：

const WebpackBundleAnalyzer= require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  lintOnSave: false,
  runtimeCompiler: true,
  filenameHashing:false,
  productionSourceMap: false,
  configureWebpack: {
    resolve: {
       symlinks: false
    },
    optimization: {
      splitChunks: {
       cacheGroups: {
          app: {
            chunks: 'all',
            name: 'main',
            test: /[\\/]src[\\/](.*)[\\/]/,
          },
          flagIcons: {
            chunks: 'all',
            name: 'flagIcons',                
           //test: /[\\/]node_modules[\\/]@coreui[\\/]((icons).*)[\\/]/,
            test: /[\\/]node_modules[\\/]@coreui[\\/]icons[\\/]js[\\/]((flag).*)[\\/]/,
          },
          freeIcons: {
            chunks: 'all',
            name: 'freeIcons',                
           //test: /[\\/]node_modules[\\/]@coreui[\\/]((icons).*)[\\/]/,
            test: /[\\/]node_modules[\\/]@coreui[\\/]icons[\\/]js[\\/]((free).*)[\\/]/,
          },
          brandIcons: {
            chunks: 'all',
            name: 'brandIcons',                
            test: /[\\/]node_modules[\\/]@coreui[\\/]icons[\\/]js[\\/]((brand).*)[\\/]/,
          },
          vendors: {
            chunks: 'all',
            name: 'vendors',
            test: /[\\/]node_modules[\\/]@coreui[\\/]((?!icons).*)[\\/]/,
          },
          // Merge all the CSS into one file
          styles: {
            name: 'styles',
            test: /\.s?css$/,
            chunks: 'all',
            minChunks: 1,
            reuseExistingChunk: true,
            enforce: true,
          }
        }
      }
    },

    plugins:[new WebpackBundleAnalyzer()]
  }
}

对结果满意后，您可以删除“WebpackBundleAnalyzer”。

【讨论】：

终于找到了我过去 2 小时一直在寻找的答案 :) 谢谢！