Yeniden Yükleme Sass Webpack 2'yi Nasıl Kullanılır?

Question

Geliştirme için Webpack2, webpack-dev-middleware ve HMR kullanan bir React uygulaması kurmaya çalışıyorum. Bir React bileşeninde bir değişiklik yaptığımda, tarayıcıda amaçlanan şekilde güncellenir. Çalıştığım sorun, .scss dosyalarımı değiştirdiğimde, tarayıcının güncellemesini yapmamasıdır. yerine ne olur, konsolda aşağıdaki bana sağlamasıdır: Bundan sonra

[HMR] bundle rebuilding 
client.js:207 [HMR] bundle rebuilt in 1567ms 
process-update.js:27 [HMR] Checking for updates on the server... 
process-update.js:98 [HMR] Nothing hot updated. 
process-update.js:107 [HMR] App is up to date. 

, ben sayfayı yenilediğinizde, benim tarzım değişiklikler görünür. Ben neler olduğunu tamamen emin değilim veya sorunun kaynaklanıyor ama biraz yardım istiyorum ve clarification.Below benim kurulum nerede:

Webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 
var autoprefixer = require('autoprefixer'); 
var DashboardPlugin = require('webpack-dashboard/plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var argv = require('yargs').argv; 

const config = {}; 

// This configured production 
if (argv.p) { 
    config.entry = [ 
     './src/client/scripts/index', 
     './src/client/scripts/utils/index', 
     './src/client/styles/index.scss' 
    ] 
    config.plugins = [ 
     new DashboardPlugin(), 
     new ExtractTextPlugin({ 
     filename: 'bundle.css', 
     allChunks: true 
     }), 
    ] 
} 
else { 
    config.entry = [ 
    'react-hot-loader/patch', 
    'webpack-hot-middleware/client', 
    './src/client/scripts/index', 
    './src/client/scripts/utils/index', 
    './src/client/styles/index.scss' 
    ] 
    config.plugins = [ 
    new DashboardPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoEmitOnErrorsPlugin(), 
    new webpack.NamedModulesPlugin(), 
    new ExtractTextPlugin({ 
     filename: 'bundle.css', 
     allChunks: true 
    }) 
    ] 
} 

module.exports = { 
    entry: config.entry, 
    output: { 
    path: path.join(__dirname, 'src', 'client', 'static'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    devtool: 'inline-source-map', 
    devServer: { 
    hot: true, 
    contentBase: path.resolve(__dirname, 'src', 'client', 'static'), 
    publicPath: (__dirname, 'src', 'client', 'static') 
    }, 
    plugins: config.plugins, 
    module: { 
    rules: [ 
     { 
     test: /\.js?$/, 
     exclude: /(node_modules|bower_components)/, 
     include: path.join(__dirname, 'src'), 
     use: [ 
      { 
      loader: 'babel-loader', 
      query: { 
       presets: ['react', ['es2015', { 'modules': false }], 'stage-0'], 
       plugins: ['react-hot-loader/babel', 'react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
      } 
      } 
     ] 
     }, 
     { 
     test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
     use: [ 
      { 
      loader: 'url-loader?limit=100000' 
      } 
     ], 
     }, 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader', 'sass-loader'] 
     }) 
     } 
    ] 
    } 
}; 

Server.js webpack-dev-middleware istemci tarafında

const router = Router(); 
const clientDir = resolve(`${__dirname}/../../client`); 

if (isDev()) { 
    const webpackDevMiddleware = require('webpack-dev-middleware') 
    const webpack = require('webpack') 
    const webpackConfig = require('../../../webpack.config') 
    const webpackHotMiddleware = require('webpack-hot-middleware') 

    const compiler = webpack(webpackConfig) 

    // This compiles our app using webpack 
    router.use(webpackDevMiddleware(compiler, { 
    publicPath: webpackConfig.output.publicPath, 
    noInfo: true 
    })) 

    // This connects our app to HMR using the middleware 
    router.use(webpackHotMiddleware(compiler)) 
} 

router.use(express.static(clientDir)); 

export default router 

index.js kullanılarak

içeriği ayıklanmış olan şekilde CSS temsil Paketinizdeki ilgili modül boş olduğu için extract-text-webpack-plugin ve WebPack sonra kullandığınız

import React from 'react' 
import ReactDOM from 'react-dom' 
import { AppContainer } from 'react-hot-loader' 
import App from './App' 

const root = document.querySelector('.root'); 

// Wraps our App in AppContainer 
const render = (Component) => { 
    ReactDOM.render(
    <AppContainer> 
     <Component/> 
    </AppContainer>, 
    root 
); 
}; 

// Renders our application 
render(App); 

// This checks if a component has been updated 
// It then accepts the changes and replaced the module. 
// It's only checking if JS has been changed... 
// @TODO - it only works for JS not CSS. 
// I think this is an issue with webpack not 
// recognizing bundle.css as a dependency? 
if (module.hot) { 
    module.hot.accept(); 
} 

Answer 1

, webpack-dev-middleware hiçbir şey değişmedi düşünüyor demetini yeniden oluşturur.

HMR'yi almak için geliştirmede extract-text-webpack-plugin'u devre dışı bırakmanız gerekir. disable option'u kullanabilir ve <style> etiketlerini enjekte eden style-loader'a geri dönecektir. Bunun yerine NODE_ENV=production gibi ortam değişkenleri kullanabilir ve eklentisinde kullanabilirsiniz eklentisi iki versiyonunu tanımlamak zorunda

new ExtractTextPlugin({ 
    filename: 'bundle.css', 
    allChunks: true, 
    disable: true 
}) 

: berrak yanıt ve bağlam için

new ExtractTextPlugin({ 
    filename: 'bundle.css', 
    allChunks: true, 
    disable: process.env.NODE_ENV !== 'production' 
})