Nie można HMR (Gorąca Moduł zastępczej) CSS/SCSS z Webpack 2.2.0 i WebPACK-DEV serwera 2.2.1

Question

wersje

"ekstraktu tekstu WebPack-wtyczki": „^ 2.0.0 -rc.2"

"WebPack": "^ 2.2.0"

"WebPack-dev serwer": "^ 2,2,1"

Problem

"wyciąg-text-WebPack-plugin": "^ 1.0.1"

"WebPack": "^ 1.14.0"

"WebPack-dev-serwer": „^ 1.16.2 "

Nie można już HMR css/scss od aktualizacji do wersji 2, zmiana stylów powoduje zmianę (zobacz przykładowy wynik poniżej), ale muszę ręcznie odświeżyć stronę, aby zobaczyć zmiany, które strona nie odświeża automatycznie, również, jeśli dokonam zmiany w pliku js po zmianie pliku scss, zmiany są następnie odzwierciedlane jako wyzwalacz js zmiany HMR, który obejmuje również zmiany stylu, ale tylko zmiana stylów bez zmian js wymaga ręcznego odświeżania strony.

Jakieś pomysły, jeśli skonfigurowałem coś źle lub co muszę zrobić, aby HMR css/scss działał?

Mam również opublikowany problem tutaj: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384, ale nie jestem pewien, czy jest to problem Webpack-dev-serwer lub ekstrakt ekstrakt-tekst-wtyczki lub po prostu coś zrobiłem.

bieg Command:

run npm dev

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

konfiguracji przed uaktualnieniem:

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; 

konfiguracji po uaktualnieniu:

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; 

Wyjściowe ładowanie początkowej strony próbki.

> 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. 

próbka wyjściowa po zmianie 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. 

Można zobaczyć rozmiar main.css zmianie, ale strona nie odświeżane aż naciśnięty klawisz F5

Answer 1

Jak stwierdzono w github stronie głównej wyciąg-text-WebPACK-plugin: Zastrzeżenia: "Bez wymiany modułu Hot"

Nie należy używać tej wtyczki podczas programowania, nadal jest przydatna do tworzenia kompilacji do produkcji. Możesz utworzyć dwa pliki konfiguracyjne Webpack, jeden dla dev i jeden dla prod, który może pomóc w obu scenariuszach.