Webpack не перестраивается при изменении css, отсутствует какая-то настройка?

Question

Я устанавливаю postcss-loader + style-loader на webpack, и я использую webpack-dev-сервер, но каждый раз, когда вы меняете css, веб-пакет не восстанавливается.

серверный скрипт WebPack DEV я использую на скрипты НПМ:

webpack-dev-server --hot 

webpack.config.js

const path = require('path') 
const webpack = require('webpack') 
const lost = require('lost') 
const mqpacker = require('css-mqpacker') 
const precss = require('precss') 
const cssnano = require('cssnano') 
const nested = require('postcss-nested') 
const cssnext = require('postcss-cssnext') 
const atImport = require('postcss-import') 
const postCSSFocus = require('postcss-focus') 
const pxtorem = require('postcss-pxtorem') 
const flexBugsFixes = require('postcss-flexbugs-fixes') 
const rucksack = require('rucksack-css') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 
const objectFit = require('postcss-object-fit-images') 
const CopyWebpackPlugin = require('copy-webpack-plugin') 
const StatsPlugin = require('stats-webpack-plugin') 

const environment = process.env.NODE_ENV 

module.exports = { 

    devServer: { 
    colors: true, 
    historyApiFallback: true, 
    inline: false, 
    port: 8080, 
    }, 

    entry: [ 
    'webpack/hot/dev-server?reload=true', 
    path.join(__dirname, 'src/script/app.js') 
    ], 

    output: { 
    path: path.join(__dirname, '/build/'), 
    filename: 'index.js', 
    publicPath: '/' 
    }, 

    resolve: { 
    extensions: ['', '.js', '.css', '.json'] 
    }, 

    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'src/index.html', 
     inject: 'body', 
     filename: 'index.html' 
    }), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new ExtractTextPlugin('[name].min.css'), 
    new webpack.optimize.UglifyJsPlugin({ 
     compressor: { 
     warnings: false, 
     screw_ie8: true 
     } 
    }), 
    new StatsPlugin('webpack.stats.json', { 
     source: false, 
     modules: false 
    }), 
    new CopyWebpackPlugin([{ 
     context: 'src/svg', 
     from: '*.svg', 
     to: 'svg' 
    }]) 
    ], 

    module: { 
    loaders: [{ 
     test: /\.worker\.js$/, 
     loader: 'babel!worker?inline!' 
    }, { 
     test: /\.js?$/, 
     exclude: [/node_modules/, /\.worker\.js$/], 
     loader: 'babel' 
    }, { 
     test: /\.mod\.css$/, 
     loader: ExtractTextPlugin.extract('style', 'css?modules!postcss') 
    }, { 
     test: /\.css$/, 
     exclude: /\.mod\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') 
    }, { 
     test: /\.(png|jpe?g|svg|gif)$/, 
     loaders: [ 
     'file?hash=sha512&digest=hex&name=[hash].[ext]', 
     'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}' 
     ] 
    }, { 
     test: /\.svg$/, 
     loader: 'url?limit=65000&mimetype=image/svg+xml&name=fonts/[name].[ext]' 
    }, { 
     test: /\.woff$/, 
     loader: 'url?limit=65000&mimetype=application/font-woff&name=fonts/[name].[ext]' 
    }, { 
     test: /\.woff2$/, 
     loader: 'url?limit=65000&mimetype=application/font-woff2&name=fonts/[name].[ext]' 
    }, { 
     test: /\.[ot]tf$/, 
     loader: 'url?limit=65000&mimetype=application/octet-stream&name=fonts/[name].[ext]' 
    }, { 
     test: /\.eot$/, 
     loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=fonts/[name].[ext]' 
    }], 
    resolve: { 
     extensions: ['', '.js', '.css', '.json'] 
    } 
    }, 

    postcss: compiler => [ 
    atImport({ 
     addDependencyTo: compiler 
    }), 
    precss, 
    cssnext({ 
     browsers: ['last 2 versions'] 
    }), 
    pxtorem({ 
     propWhiteList: ['font', 'font-size', 'line-height', 'letter-spacing'], 
     selectorBlackList: [] 
    }), 
    lost, 
    postCSSFocus, 
    flexBugsFixes, 
    rucksack, 
    objectFit, 
    nested, 
    mqpacker, 
    cssnano({ 
     autoprefixer: false 
    }) 
    ] 
} 

Lack конфигурационный что-то? Поскольку в документации Webpack ничего не найдено о

Answer 1

Вам нужен файл css в вашем основном файле javascript? Например, в вашем index.jsx:

require("somestyle.css"); 

CSS-погрузчик будет знать только о файлах CSS, которые необходимо применение. Для получения дополнительной информации см.: https://github.com/webpack/css-loader