未能與babel，webpack和sass一起使用熱重載

Question

我試圖使用webpack-dev-server爲JS和SCSS文件擁有熱重載功能，但是它沒有這樣做。我不斷收到同樣的錯誤：

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

我已經添加了我的/dist/main.css和/dist/main.js文件到我的index.html，剩下的就是像如下：

我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

我beeing在使用SASS一個網站，和的WebPack熱重裝工作，這就是我目前瞭解到：

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，只需使用style-loader（和SASS加載器）。這會給你SASS/CSS熱重新加載。

對於JavaScript，你需要讓你的模塊接受更新，熱重載不會神奇地工作。對更多的信息可以在這裏找到：https://webpack.github.io/docs/hot-module-replacement.html