Webpack генерирует js-файлы с помощью css / scss-файлов - PullRequest
Новая
       71

Webpack генерирует js-файлы с помощью css / scss-файлов

1 голос
/ 08 июля 2019

Описание

В веб-пакете я использую mini-css-extract-plugin : 

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].[hash].css',
    chunkFilename: '[name].[hash].css',
  })
]

Для загрузки файлов scss в файлы чанка : 

{
  test: /\.scss$/,
  use: [
    { loader: MiniCssExtractPlugin.loader, options: {
        hmr: isdev,
        reloadAll: true
      }
    },
    "css-loader",
    "sass-loader",
  ]
}

Когда я загружаю scss с динамическим импортом : 

import(/* webpackChunkName: "test" */ 'test.scss')

Будет сгенерирован тест . [Hash] .css , содержащий стили и тест . [Hash] .js : 

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[15],{

/***/ 81:
/***/ (function(module, exports, __webpack_require__) {

// extracted by mini-css-extract-plugin

/***/ })

}]);

Проблема

Я хочу минимизировать задержку и загружаемые файлы, поэтому считаю излишним иметь почти пустой тест. [Hash] .js файл.

У вас есть способ включить scss в файл js (см. Идею 1) или не испускать / использовать почти пустой файл js?

Идея 1: не использовать mini-css-extract-plugin

Моей первой идеей было не использовать mini-css-extract-plugin для динамического импортированного scss, но это будет включать в себя много материала css-base в js (https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/255).

1 Ответ

0 голосов
/ 10 июля 2019

Вот фрагмент кода, который может вас заинтересовать.Здесь он написан вживую, так что, возможно, есть какая-то ошибка, которую я не знаю.

Я использую альтернативный способ, но рядом внутри моего собственного проекта.

Поведение:

  1. Используйте подключаемый модуль Event Hook и вызывайте его, когда готов веб-пакет
  2. Циклически просматривайте каждый файл
  3. Если файл css и имеет то же имя, что и расширение js

  4. Затем удалите файл js 

    const EventHooksPlugin = require('event-hooks-webpack-plugin');
const path             = require('path');
const fs               = require('fs');
const _                = require('underscore');

plugins: [
    new EventHooksPlugin({
            done: () => {
                    const publicDir = __dirname + '/public';
                    const files     = fs.readdirSync(publicDir);

                    _.each(files, file => {
                          if (path.extname(file) !== '.css') { return ;}

                          const fileJs = file.replace('.css', '.js');

                          if (!fs.existsSync(fileJs)) {return;}

                          fs.unlinkSync(fileJs);
                    });
            }
    })
]
...