HMR करने में असमर्थ (गर्म मॉड्यूल रिप्लेसमेंट) Webpack 2.2.0 और webpack-देव-सर्वर के साथ सीएसएस/एससीएसएस 2.2.1

Question

संस्करण

"निकालने-पाठ-webpack-प्लगइन": "^ 2.0.0 -rc.2 ",

" webpack ":"^2.2.0 ",

" webpack-देव-सर्वर ":"^2.2.1 "

अंक

"निकालने-पाठ-webpack-प्लगइन": "^ 1.0.1",

"webpack": "^ 1.14.0",

"webpack-देव-सर्वर": "^ 1.16.2 "

संस्करण 2 में अपग्रेड करने के बाद एचएमआर सीएसएस/एससीएसएस में सक्षम नहीं है, शैलियों को बदलना एक बदलाव को ट्रिगर करता है (नीचे आउटपुट नमूना देखें) लेकिन मुझे पेज को मैन्युअल रूप से रीफ्रेश करना है ताकि पेज ऑटो रीफ्रेश न हो, अगर मैं एक एसएसएस फ़ाइल बदलने के बाद किसी जेएस फ़ाइल में बदलाव करता हूं तो परिवर्तनों को तब परिलक्षित किया जाता है जब जेएस परिवर्तन एक एचएमआर ट्रिगर करता है जिसमें शैली में परिवर्तन भी शामिल होता है, लेकिन केवल जेएस परिवर्तन वाले शैलियों को बदलने के लिए मैन्युअल पेज रीफ्रेश की आवश्यकता होती है।

कोई विचार अगर मैंने कुछ गलत कॉन्फ़िगर किया है या सीएसएस/एसएसएस एचएमआर के लिए मुझे क्या करना है?

मैंने इस मुद्दे को यहां भी पोस्ट किया है: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384 लेकिन यह सुनिश्चित नहीं है कि यह वेबपैक-डीवी-सर्वर समस्या है या निकालने-टेक्स्ट-वेबपैक-प्लगइन समस्या या बस कुछ मैंने किया है।

कमान चल रहा है:

NPM रन देव

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

एससीएसएस परिवर्तन के बाद आउटपुट नमूना।

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

दबाया के रूप में निकालने-पाठ-webpack-प्लगइन का GitHub मुख्य पृष्ठ में कहा गया है: चेतावनियां: "कोई गर्म मॉड्यूल रिप्लेसमेंट"

आप इस प्लगइन है, जबकि विकास उपयोग नहीं करना चाहिए, यह अभी भी उत्पादन के लिए निर्माण बनाने के लिए उपयोगी है। आप दो वेबपैक कॉन्फ़िगरेशन फाइलें बना सकते हैं, एक देव के लिए और एक प्रोड के लिए, जो दोनों परिदृश्यों में मदद कर सकता है।