babel、webpack、sassでホットリロードを使用できない

Question

webpack-dev-serverを使用してJSおよびSCSSファイルのホットリロード機能を使用しようとしていますが、失敗します。次のように私が追加した私の/dist/main.cssを

[WDS] App updated. Recompiling... 
[WDS] App hot update... 
[HMR] Checking for updates on the server... 
[HMR] The following modules couldn't be hot updated: (They would need a full reload!) 
[HMR] - 381 
[HMR] Nothing hot updated. 
[HMR] App is up to date. 

と私のindex.htmlにファイルを/dist/main.js、残りは次のとおりです：私は同じエラーを取得しておくよ

私server.jsは次のとおりです。

const webpack = require('webpack'); 
const WebpackDevServer = require('webpack-dev-server'); 
const config = require('./webpack.config'); 

new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    historyApiFallback: true 
}).listen(3000, 'localhost', function (err, result) { 
    if (err) { 
    return console.log(err); 
    } 

    console.log('Listening at http://localhost:3000/'); 
}); 

マイwebpack.configファイルは次のとおりです。

const sassLoaders = [ 
    'css-loader?minimize!', 
    'postcss-loader', 
    'sass-loader?includePaths[]=' + path.resolve(__dirname, './src/css') 
] 

module.exports = { 
    entry: [ 
     'babel-polyfill', 
     'webpack-dev-server/client?http://localhost:3000', 
     'webpack/hot/only-dev-server', 
     path.normalize(__dirname + '/src/js/main'), 
     path.normalize(__dirname + '/src/css/styles.scss') 
    ], 
    devtool: 'cheap-module-source-map', 
    output: { 
     filename: '[name].js', 
     path: path.join(__dirname, './dist'), 
     publicPath: '/dist' 
    }, 
    module: { 
     loaders: [ 
      { 
       loader: 'babel', 
       test: /\.js$/, 
       include: [path.resolve(__dirname, 'src', 'js')], 
       query: { 
        plugins: ['transform-runtime'], 
        presets: ['es2015'] 
       } 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('[name].css'), 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { warnings: false } 
     }), 
     new webpack.HotModuleReplacementPlugin() 
    ], 
    postcss: [ 
     autoprefixer({ 
      browsers: ['last 2 versions'] 
     }) 
    ], 
    resolve: { 
     extensions: ['', '.js', '.scss'], 
     root: [path.join(__dirname, './src')] 
    } 
}; 

ありがとうございました！

Answer 1

私はSASSを使用して、ウェブサイトでのWebPACK、ホットリロードでの作業beeingてきたし、それは私がこれまでに学んだことです：

1 - webpack.config。 jsには独自のサーバー構成（devServer）があります。そうしたくない場合は、server.jsファイルを作成する必要はありません。

私webpack.config.jsファイルを確認します！

var path = require("path"); 
var webpack = require("webpack"); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './app/app.js', 
    devServer: { 
     inline: true, 
     port: 3333 
    }, 
    output: { 
     path: './', 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: [path.resolve(__dirname, 'node_modules')], 
       loader: 'babel', 
       query: { 
        presets: 'es2015', 
       } 
      }, 
      { 
       test: /\.json$/, 
       loader: 'json-loader' 
      }, 
      { 
       test: /\.scss$/, 
       loader: 'style!css!sass?sourceMap' 
      }, 
      { test: /\.jpg$/, loader: "file-loader" }, 
      { test: /\.png$/, loader: "url-loader?mimetype=image/png" }, 
      { 
       test: /\.(otf|eot|svg|ttf|woff|woff2)$/, 
       loader: 'file?name=assets/fonts/[name].[ext]' 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new HtmlWebpackPlugin(
      { 
       title: 'My App', 
       template: './index.html' 
      } 
     ) 
    ] 
} 

2 - 代わりExtractTextPluginの私は、スタイルを使用しているCSS SASSローダーは（あなたがそれらをNPMを使用してインストールする必要があります）：

{ 
    test: /\.scss$/, 
    loader: 'style!css!sass?sourceMap' 
} 

私がしなければならないことは、アクセスhttp://localhost:3333です。それは動作します。

このファイルをコピー/ペーストして自分のプロジェクトに合わせることができます。私は多くのローダーを試していますが、スタイルを使用しています！css！sassはあなたが望むものを達成するはずです。

Answer 2

devモードでは、ExtractTextPluginを使用しないでください。スタイルローダー（およびSASSローダー）を使用してください。それはあなたにSASS/CSSホットリロードを与えるでしょう。

JavaScriptについては、モジュールが更新を受け入れるようにする必要があります。ホットリロードは魔法のように動作しません。その上の詳細な情報はここで見つけることができます：https://webpack.github.io/docs/hot-module-replacement.html