С помощью Webpack можно генерировать только CSS, исключая output.js?

Я использую Webpack с extract-text-webpack-plugin.

В моем проекте у меня есть сценарии сборки. Один из сценариев сборки должен связывать и только минимизировать CSS. Поскольку я использую Webpack для других скриптов, мне было неплохо использовать Webpack, даже когда Я хочу только объединить и уменьшить CSS.

Он работает нормально, за исключением того, что я не могу избавиться от файла output.js. Я не хочу получить выходной файл webpack. Я просто хочу CSS для этого конкретного script.

Есть ли способ избавиться от получаемого JS? Если нет, предлагаете ли вы какой-либо другой инструмент для обработки CSS? Спасибо.

Ответы

Ответ 1

Существует простой способ, не требуется дополнительный инструмент.

Существует простой способ, и вам не нужны дополнительные библиотеки, кроме тех, которые вы уже используете: webpack с extract-text-webpack-plugin.

Короче:

Сделать выходные файлы js и css одинаковыми, тогда файл css переопределит js файл.

Настоящий пример (webpack 2.x):

import path from 'path'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

const config = {
  target: 'web',
  entry: {
    'one': './src/one.css',
    'two': './src/two.css'
  },
  output: {
    path: path.join(__dirname, './dist/'),
    filename: '[name].css' // output js file name is identical to css file name
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].css') // css file will override generated js file
  ]
}

Ответ 2

К сожалению, в настоящее время это невозможно по дизайну. webpack был запущен как сборщик JavaScript, который способен обрабатывать другие "веб-модули", такие как CSS и HTML. JavaScript выбран в качестве базового языка поскольку он может размещать все остальные языки просто как строки. Модуль extract-text-webpack-plugin просто извлекает эти строки как автономный файл (таким образом, имя).

Вероятно, вам лучше с PostCSS, который предоставляет различные плагины для эффективного постпроцесса CSS.

Ответ 3

Одним из решений является выполнение webpack с API Node и управление выходом с помощью опции memory-fs. Просто скажите, чтобы проигнорировать полученный js файл. Установите для параметра output.path значение "/" в webpackConfig.

var compiler = webpack(webpackConfig);
var mfs = new MemoryFS();
compiler.outputFileSystem = mfs;
compiler.run(function(err, stats) {
    if(stats.hasErrors()) { throw(stats.toString()); }
    mfs.readdirSync("/").forEach(function (f) {
        if(f === ("app.js")) { return; } // ignore js-file
        fs.writeFileSync(destination + f, mfs.readFileSync("/" + f));
    })
});

Ответ 4

Вы можете очистить папку dist от любых нежелательных ресурсов после запуска done. Этого легко добиться с помощью event-hooks-webpack-plugin

//
plugins: [
        new EventHooksPlugin({
            'done': () => {
                // delete unwanted assets 
            }
        })
    ]

Удачи...