Невозможно ГМР (Hot Замена модуля) CSS/SCSS с Webpack 2.2.0 и WebPack-DEV-сервер 2.2.1

Question

Версии

"Экстракт-текст-WebPack-плагин": «^ 2.0.0 -rc.2" ,

"WebPack": "^ 2.2.0",

"WebPack-DEV-сервер": "^ 2.2.1"

Выпуск

"Экстракт-текст-WebPack-плагин": "^ 1.0.1",

"WebPack": "^ 1.14.0",

"WebPack-DEV-сервер": «^ 1.16.2 "

Больше не может использовать HMR css/scss с момента обновления до версии 2, изменение стилей вызывает изменение (см. Пример вывода ниже), но мне нужно вручную обновить страницу, чтобы увидеть изменения, которые страница не обновляет автоматически, также, если я вношу изменения в файл js после изменения файла scss, изменения затем отражаются как изменение js, запускающее HMR, который также включает изменения стиля, но для изменения стилей без изменений js требуется обновление страницы вручную.

Любые идеи, если я настроил что-то неправильно или что мне нужно сделать для работы css/scss HMR?

Я также разместил вопрос здесь: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384, но не уверен, что это проблема webpack-dev-server или проблема с экстрактом-текстом-webpack-plugin или просто что-то, что я сделал.

Команда работает:

НПМ запустить DEV

"scripts": { 
    "dev": "webpack-dev-server --hot --inline" 
    } 

конфигурации перед обновлением:

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

const BUILD_DIR = path.resolve(__dirname, 'public'); 
const APP_DIR = path.resolve(__dirname, 'app'); 

let generateHtml = new HtmlWebpackPlugin({ title: 'My App' }); 
let extractCSS = new ExtractTextPlugin('styles/[name].css', { allChunks: true }); 

const config = { 
    entry: APP_DIR + '/index.js', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    externals: { 
    'cheerio': 'window', 
    'react/lib/ExecutionEnvironment': true, 
    'react/lib/ReactContext': true, 
    }, 
    module : { 
    loaders : [ 
     { 
     test : /\.jsx?/, 
     include : APP_DIR, 
     loader : 'babel' 
     }, 
     { 
     test: /\.scss$/, 
     loader: extractCSS.extract('style', 'css?modules=true!sass?sourceMap=true') 
     } 
    ] 
    }, 
    plugins: [ 
    generateHtml, 
    extractCSS 
    ] 
}; 

module.exports = config; 

конфигурации после обновления:

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

const BUILD_DIR = path.resolve(__dirname, 'public'); 
const APP_DIR = path.resolve(__dirname, 'app'); 

let generateHtml = new HtmlWebpackPlugin({ title: 'My App' }); 
let extractCSS = new ExtractTextPlugin({ filename: 'styles/[name].css', allChunks: true }); 

const config = { 
    entry: APP_DIR + '/index.js', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    externals: { 
    'cheerio': 'window', 
    'react/lib/ExecutionEnvironment': true, 
    'react/lib/ReactContext': true, 
    }, 
    module : { 
    loaders : [ 
     { 
     test : /\.(js|jsx)?/, 
     include : APP_DIR, 
     loader : 'babel-loader' 
     }, 
     { 
     test: /\.scss$/, 
     loader: extractCSS.extract({ 
      fallbackLoader: 'style-loader', 
      loader: ['css-loader?modules', 'sass-loader'] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    generateHtml, 
    extractCSS 
    ] 
}; 

module.exports = config; 

Выходной образец начальной загрузки страницы.

> webpack-dev-server --hot --inline 

Project is running at http://localhost:8080/ 
webpack output is served from/
Hash: 0e873f689fcea2b7cee6 
Version: webpack 2.2.0 
Time: 3350ms 
      Asset  Size Chunks     Chunk Names 
     bundle.js  1.1 MB  0 [emitted] [big] main 
styles/main.css 634 bytes  0 [emitted]   main 
    index.html 223 bytes   [emitted]   
chunk {0} bundle.js, styles/main.css (main) 1.03 MB [entry] [rendered] 
    [19] ./~/react/react.js 56 bytes {0} [built] 
    [45] ./~/redux/es/index.js 1.08 kB {0} [built] 
    [106] ./~/react-redux/es/index.js 194 bytes {0} [built] 
    [129] (webpack)/hot/emitter.js 77 bytes {0} [built] 
    [130] ./app/index.js 938 bytes {0} [built] 
    [131] (webpack)-dev-server/client?http://localhost:8080 4.66 kB {0} [built] 
    [132] (webpack)/hot/dev-server.js 1.57 kB {0} [built] 
    [139] ./app/containers/App.js 4.25 kB {0} [built] 
    [178] ./~/react-dom/index.js 59 bytes {0} [built] 
    [269] ./~/redux-thunk/lib/index.js 529 bytes {0} [built] 
    [300] ./~/strip-ansi/index.js 161 bytes {0} [built] 
    [305] ./~/url/url.js 23.3 kB {0} [built] 
    [307] (webpack)-dev-server/client/socket.js 856 bytes {0} [built] 
    [309] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built] 
    [310] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./app/index.js 52 bytes {0} [built] 
    + 296 hidden modules 
Child html-webpack-plugin for "index.html": 
    chunk {0} index.html 541 kB [entry] [rendered] 
     [0] ./~/lodash/lodash.js 540 kB {0} [built] 
     [1] (webpack)/buildin/global.js 509 bytes {0} [built] 
     [2] (webpack)/buildin/module.js 517 bytes {0} [built] 
     [3] ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-plugin/default_index.ejs 540 bytes {0} [built] 
Child extract-text-webpack-plugin: 
    chunk {0} extract-text-webpack-plugin-output-filename 1.77 kB [entry] [rendered] 
     [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built] 
     [1] ./~/css-loader?modules!./~/sass-loader!./app/components/user/users.scss 267 bytes {0} [built] 
Child extract-text-webpack-plugin: 
    chunk {0} extract-text-webpack-plugin-output-filename 1.81 kB [entry] [rendered] 
     [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built] 
     [1] ./~/css-loader?modules!./~/sass-loader!./app/containers/app.scss 307 bytes {0} [built] 
Child extract-text-webpack-plugin: 
    chunk {0} extract-text-webpack-plugin-output-filename 2.21 kB [entry] [rendered] 
     [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built] 
     [1] ./~/css-loader?modules!./~/sass-loader!./app/components/navbar/navbar.scss 702 bytes {0} [built] 
Child extract-text-webpack-plugin: 
    chunk {0} extract-text-webpack-plugin-output-filename 1.87 kB [entry] [rendered] 
     [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built] 
     [1] ./~/css-loader?modules!./~/sass-loader!./app/components/common/common.scss 361 bytes {0} [built] 
webpack: bundle is now VALID. 

Выход образца после изменения SCSS.

webpack: bundle is now INVALID. 
Hash: f16b1beda9083db91735 
Version: webpack 2.2.0 
Time: 251ms 
           Asset  Size Chunks     Chunk Names 
          bundle.js  1.1 MB  0 [emitted] [big] main 
0e873f689fcea2b7cee6.hot-update.json 35 bytes   [emitted]   
        styles/main.css 626 bytes  0 [emitted]   main 
chunk {0} bundle.js, styles/main.css (main) 1.03 MB [entry] [rendered] 
    [143] ./app/components/navbar/navbar.scss 181 bytes {0} [built] 
    + 310 hidden modules 
Child html-webpack-plugin for "index.html": 
    chunk {0} index.html 541 kB [entry] 
     + 4 hidden modules 
Child extract-text-webpack-plugin: 
    chunk {0} extract-text-webpack-plugin-output-filename 2.2 kB [entry] [rendered] 
     [1] ./~/css-loader?modules!./~/sass-loader!./app/components/navbar/navbar.scss 694 bytes {0} [built] 
     + 1 hidden modules 
webpack: bundle is now VALID. 

Вы можете увидеть размер main.css изменился, но страница не обновляется, пока я не нажал f5

Answer 1

Как указано в GitHub главной странице приточно-текст-WebPack-плагин: Предостережения: «No Hot Module Replacement»

Вы не должны использовать этот плагин во время разработки, он по-прежнему полезен для создания сборки для производства. Вы можете создать два конфигурационных файла webpack, один для dev и один для prod, который может помочь для обоих сценариев.