Использование webpack-merge для добавления загрузчиков в массив правил `use` - PullRequest
Новая
       6

Использование webpack-merge для добавления загрузчиков в массив правил `use`

0 голосов
/ 29 марта 2019

Я использую webpack-merge , чтобы объединить мои файлы конфигурации webpack для сред разработки и разработки.Чтобы извлечь CSS в режиме Prod, я использую mini-css-extract-plugin .Согласно документации, я использую его вместо style-loader, который используется только во время разработки.На данный момент моя конфигурация веб-пакета для блоков CSS выглядит следующим образом: 

// webpack.common.js
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    process.env.NODE_ENV === `production` ? MiniCssExtractPlugin.loader : `style-loader`,
    `css-loader`,
    `postcss-loader`,
    `sass-loader`
  ]
}

Это работает, но, поскольку я использую webpack-merge, я хочу избежать такой логики в моем общем файле конфигурации.Теперь я попытался разделить это следующим образом и webpack-merge объединить различные загрузчики: 

// webpack.common.js
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    `css-loader`,
    `postcss-loader`,
    `sass-loader`
  ]
}

// webpack.dev.js
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    `style-loader`,
    // webpack-merge should prepend all loaders from `webpack.common.js`
  ]
}

// webpack.prod.js
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    // webpack-merge should prepend all loaders from `webpack.common.js`
  ]
}

Используя базовый merge fn, массивы use не объединяются, а заменяются,Какой ofc приводит к ошибке: ModuleParseError: Module parse failed: You may need an appropriate loader to handle this file type.

Итак, я попытался использовать merge.smartStrategy({ 'module.rules.use': 'prepend' })(), но получаю ошибку: TypeError: this[MODULE_TYPE] is not a function.Что-то мне не хватает или это просто невозможно?

1 Ответ

1 голос
/ 29 марта 2019

Разбивая мою конфигурацию webpack, я забыл включить MiniCssExtractPlugin в раздел plugins моего продукта.файл конфигурации.

Все работает как положено, используя merge.smartStrategy({ 'module.rules.use': 'prepend' })().

...