Отключить отдельные куски для CSS, Vue Cli 3 Webpack 4 - PullRequest
Новая
       35

Отключить отдельные куски для CSS, Vue Cli 3 Webpack 4

0 голосов
/ 18 февраля 2019

Я использую проект, созданный с использованием последней версии vue cli 3.Я использую конфигурацию по умолчанию, Мой маршрутизатор имеет много динамически импортируемых маршрутов.И мои css и js разбиты на несколько частей во время работы в производстве.Пока поведение с js желательно.Мои css-файлы довольно малы. Я бы хотел отключить блоки для css.

Как мне настроить webpack для этого через файл vue.config.js.Пожалуйста, помогите с точной командой, поскольку я нахожу конфигурацию webpack и синтаксис цепочки очень запутывающим. Спасибо:)

1 Ответ

0 голосов
/ 27 марта 2019
  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,
        },
      },
    }
  }
};
...