Làm thế nào để Hot Reload Sass Sử dụng Webpack 2?

Question

Tôi đang làm việc để thiết lập ứng dụng React sử dụng Webpack2, webpack-dev-middleware và HMR để phát triển. Bất cứ khi nào tôi thực hiện một thay đổi trên một thành phần React, nó cập nhật trong trình duyệt như dự định. Vấn đề tôi đang gặp phải là khi tôi sửa đổi tệp .scss của mình, trình duyệt hiện không cập nhật không. Điều gì xảy ra thay vào đó, là trong bảng điều khiển, nó cung cấp cho tôi những điều sau đây:

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

Sau này, khi tôi làm mới trang, thay đổi kiểu của tôi sẽ xuất hiện. Tôi không hoàn toàn chắc chắn những gì đang xảy ra hoặc nơi vấn đề xuất phát từ nhưng muốn giúp đỡ và clarification.Below được thiết lập của tôi:

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 sử dụng webpack-dev-middleware

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 về phía khách hàng

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

Bạn đang sử dụng extract-text-webpack-plugin và sau khi webpack xây dựng lại gói webpack-dev-middleware cho rằng không có gì thay đổi, vì mô-đun tương ứng trong gói của bạn đại diện cho CSS trống khi nội dung của nó đã được trích xuất.

Bạn cần tắt extract-text-webpack-plugin để phát triển HMR. Bạn có thể sử dụng các disable option và nó sẽ dự phòng style-loader, mà tiêm các thẻ <style>.

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

Thay vì phải xác định hai phiên bản của plugin bạn có thể sử dụng các biến môi trường như NODE_ENV=production và sử dụng nó trong các plugin:

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