Ersetzen von webpack-dev-server durch express + webpack-dev-middleware/webpack-hot-middleware

Question

Ich versuche derzeit, meine alte Konfiguration, die webpack-dev-Server verwendet, durch eine robustere Lösung auf der Basis von Express + zu ersetzen Webpack-Middleware. Also benutze ich es so: "webpack-dev-server --content-base public/--history-api-fallback" aber jetzt würde ich es gerne so verwenden: "node devServer.js". Hier sind die Details meiner aktuellen Einrichtung.

webpack.config.dev.js:

var path = require('path'); 
var webpack = require('webpack'); 
var debug = require('debug'); 

debug.enable('app:*'); 

var log = debug('app:webpack'); 

log('Environment set to development mode.'); 
var NODE_ENV = process.env.NODE_ENV || 'development'; 
var DEVELOPMENT = NODE_ENV === 'development'; 

log('Creating webpack configuration with development settings.'); 
module.exports = { 
    devtool: 'cheap-module-eval-source-map', 
    entry: [ 
    'eventsource-polyfill', // necessary for hot reloading with IE 
    'webpack-hot-middleware/client', 
    './src/index', 
    './src/scss/main.scss', 
    ], 
    output: { 
    path: path.join(__dirname, 'public/js'), 
    filename: 'bundle.js', 
    publicPath: '/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [{ 
     test: /\.jsx?/, 
     loaders: ['babel'], 
     include: path.join(__dirname, 'src') 
    }, 
    { 
     test: /\.scss$/, 
     loader: 'style!css!sass', 
    }] 
    }, 
    compiler: { 
    hash_type: 'hash', 
    stats: { 
     chunks: false, 
     chunkModules: false, 
     colors: true, 
    }, 
    }, 
}; 

devServer.js:

var path = require('path'); 
var express = require('express'); 
var webpack = require('webpack'); 
var debug = require('debug'); 
// var history = require('connect-history-api-fallback'); 
var config = require('./webpack.config.dev'); 
var browserSync = require('browser-sync'); 

debug.enable('app:*'); 

var app = express(); 
var compiler = webpack(config); 
var log = debug('app:devServer'); 

// app.use(history({ verbose: false })); 

log('Enabling webpack dev middleware.'); 
app.use(require('webpack-dev-middleware')(compiler, { 
    lazy: false, 
    noInfo: true, 
    publicPath: config.output.publicPath, 
    quiet: false, 
    stats: config.compiler.stats, 
})); 

log('Enabling Webpack Hot Module Replacement (HMR).'); 
app.use(require('webpack-hot-middleware')(compiler)); 


log('Redirecting...'); 
app.get('/', function(req, res) { 
    res.sendFile(path.join(__dirname, '/public/', 'index.html')); 
}); 

app.get('/js/bundle.js', function(req, res) { 
    res.sendFile(path.join(__dirname, '/public/js/', 'bundle.js')); 
}); 


var port = 3000; 
var hostname = 'localhost'; 

app.listen(port, hostname, (err) => { 
    if (err) { 
    log(err); 
    return; 
    } 
    log(`Server is now running at http://${hostname}:${port}.`); 
}); 

var bsPort = 4000; 
var bsUI = 4040; 
var bsWeInRe = 4444; 

browserSync.init({ 
    proxy: `${hostname}:${port}`, 
    port: bsPort, 
    ui: { 
    port: bsUI, 
    weinre: { port: bsWeInRe }, 
    }, 
}); 

Können Sie mir sagen, wo ich falsch gehe? Ich hatte den Eindruck, dass alle Grundlagen abgedeckt sind, aber mir fehlt offensichtlich etwas, da die Seite trotz HTML und JS nicht angezeigt wird. :(

Answer 1

Sie nicht diesen Teil benötigen..

app.get('/js/bundle.js', function(req, res) { 
    res.sendFile(path.join(__dirname, '/public/js/', 'bundle.js')); 
}); 

webpack-dev-Server Middleware wird das für Sie tun Also, ich denke, das Entfernen nur wird es beheben

Answer 2

relativ Versuchen verwenden Pfade für statische Vermögen, beispielsweise anstelle von /public/, ./public/, wie gezeigt:

app.get('/', function(req, res) { 
    res.sendFile(path.join(__dirname, '/public/', 'index.html')); 
}); 

app.get('/js/bundle.js', function(req, res) { 
    res.sendFile(path.join(__dirname, '/public/js/', 'bundle.js')); 
}); 

• Und ich denke, Sie sicher sind, dass, wo immer dies devServer.js ist, an genau derselben Stelle ein Parallel Ordner sind public

• existiert Sie localhost:3000/ schlagen und nicht localhost:3000

Wenn dieser Versuch nicht funktioniert diese

app.use(express.static(path.resolve(__dirname, './public'),{ 
    index: 'index.html' 
})); 

Answer 3

So etwas ist, was für mich funktioniert:

Änderung:

app.use(require('webpack-dev-middleware')(compiler, { 

zu:

var middleware = require('webpack-dev-middleware'); 
app.use(middleware)(compiler, { 

dann Ihre app.get ändern (n):

app.get('/js/bundle.js', function(req, res){ 
    res.write(middleware.fileSystem.readFileSync(req.url)); 
    res.end(); 
}); 

app.get('*', function(req, res){ 
    res.write(middleware.fileSystem.readFileSync(path.join(__dirname, '/public/', 'index.html')))); 
    res.end(); 
}); 

Ich bin nicht in der Lage Ihre spezielle Konfiguration zu testen, damit ich frage mich, Wenn Sie Probleme mit dem ersten app.get haben, weil Sie eine andere URL als die von Ihnen angegebene anfordern, zB "/js/bundle.js" bis "/public/js/bundle.js" Wenn dies der Fall ist, versuchen Sie es stattdessen mit von req.url.

Die zweite app.get sollte index.html für jede nicht aufgelöste Anfrage, die gut für React Routing funktioniert.