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

Question

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

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

Answer 1

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

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

const path = require('path');

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

这将删除创建的块，并允许您仅使用CSS的单个文件以及JS。

2. filenameHashing: false这部分将删除文件上的散列。
3. 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,
        },
      },
    }
  }
};