Fehler beim Warmladen mit babel, webpack und sass

Question

Ich versuche, webpack-dev-server zu verwenden, um eine Hot-Reload-Funktion für JS- und SCSS-Dateien zu haben, aber es funktioniert nicht. Ich halte die gleichen Fehler:

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

Ich habe meine /dist/main.css hinzugefügt und /dist/main.js Dateien auf meine index.html, und der Rest ist wie folgt:

Mein server.js ist:

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/'); 
}); 

Meine webpack.config Datei ist:

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')] 
    } 
}; 

Thank you!

Answer 1

Ich habe beeing mit webpack und heißem Nachladen in einer Website arbeiten, die sass verwendet und das ist, was ich bisher gelernt habe:

1 - webpack.config. js hat eine eigene Serverkonfiguration (devServer), so dass Sie keine server.js-Datei erstellen müssen, wenn Sie dies nicht möchten.

Überprüfen Sie meine webpack.config.js Datei:!

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 - Statt ExtractTextPlugin ich bin mit Stil CSS sass Lader (Sie werden sie npm installieren müssen verwenden):

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

Dann alles, was ich tun muss, ist Zugriff http://localhost:3333 und es funktioniert.

Sie können diese Datei kopieren und einfügen und an Ihr eigenes Projekt anpassen. Ich experimentiere mit vielen Loadern, aber benutze nur Stil! Css! Sass sollte erreichen, was du willst.

Answer 2

Im Dev-Modus, verwenden Sie nicht ExtractTextPlugin, verwenden Sie einfach Style-Loader (und SASS Loader). Das wird SASS/CSS heiß nachladen.

Für JavaScript müssen Sie Ihre Module akzeptieren, Updates, heiße Nachladen funktioniert nicht magisch. Weitere Informationen dazu finden Sie hier: https://webpack.github.io/docs/hot-module-replacement.html