Невозможно использовать горячую перезагрузку с помощью babel, webpack и sass

Question

Я пытаюсь использовать webpack-dev-сервер, чтобы иметь функцию горячей перезагрузки для файлов 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

Я неоспоримым работать с 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, просто используйте загрузчик стиля (и загрузчики SASS). Это даст вам горячую перезагрузку SASS/CSS.

Для JavaScript вам необходимо, чтобы ваши модули принимали обновления, горячая перезагрузка не работает магически. Более подробную информацию о том, что можно найти здесь: https://webpack.github.io/docs/hot-module-replacement.html