dmc1989
@dmc1989

Как добавить минимизацию css в webpack?

1) Webpack создает файл style.min.js и style.min.css, что я не так делаю?
2) После того, как я добавил
{
  loader: 'css-loader',
  options: {
    minimize: true
  }
}
webpack начал минимизировать файл style.min.js, после чего происходит ошибка. Как правильно записать файл конфигураций?

Заранее спасибо.
'use strict'

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    bundle: './src/app.js',
    style: './styles/main.sass'
  },
  output: {
    filename: '[name].min.js',
    path: path.resolve(__dirname, 'client/public')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      },
      {
        test: /\.pug$/,
        use:  [
          'html-loader',
          {
          loader: 'pug-html-loader',
          options: {
            data: {}
          }}
        ]
      },
      {
        loader: 'css-loader',
        options: {
          minimize: true
        }
      },
      {
        test: /\.sass$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
          publicPath: path.resolve(__dirname, 'styles/')
        })
      }
    ]
  },
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.json', '.jsx', '.css', '.pug', '.sass']
  },
  //watch: true,
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: true
      }
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'views/index.pug'),
      inject: 'body'
    }),
    new ExtractTextPlugin({
      filename: '[name].min.css',
      disable: false,
      allChunks: true
    })
  ]
};
  • Вопрос задан
  • 4973 просмотра
Пригласить эксперта
Ответы на вопрос 1
@SuperOleg39ru
Front-end разработчик
Когда вы добавляете стили в качестве entry, они оборачиваются в js скрипт, который просто вставляет эти стили на страницу, при загрузке.

Обычный кейс для создания отдельного css бандла:

// в вашем './src/app.js'
import './styles/main.sass';

// в конфиге вебпака все надо упростить
// entry
{
  app: './src/app.js',
}
// module.rules
{
  test: /\.sass$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      'css-loader',
      'sass-loader'
    ]
  })
}
// plugins
new ExtractTextPlugin('styles/[name].css')


Название entry мы меняем, для читаемости, что бы не делать всякие bundle.bundle.js или bundle.min.js,
Ваши стили получат такое же имя, как и основной js файл - итого app.min.js и app.min.css
HtmlWebpackPlugin автоматически подтянет ссылки на эти файлы.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
summer Ярославль
от 100 000 до 140 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
18 апр. 2024, в 21:56
2000 руб./за проект
18 апр. 2024, в 21:00
150 руб./за проект