Sostituzione di webpack-dev-server con express + webpack-dev-middleware/webpack-hot-middleware

Question

Attualmente sto cercando di sostituire la mia vecchia configurazione che utilizzava webpack-dev-server con una soluzione più robusta basata su express + webpack-middleware. Così uso per eseguirlo in questo modo: "webpack-dev-server --content-base public/--history-api-fallback" ma ora mi piacerebbe usarlo in questo modo: "nodo devServer.js". Ecco i dettagli della mia attuale configurazione.

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 }, 
    }, 
}); 

Puoi dirmi dove sto andando male? Avevo l'impressione di avere tutte le basi coperte, ma chiaramente mi manca qualcosa poiché nonostante sia in grado di accedere a html e js, la pagina non viene visualizzata. :(

Answer 1

Non hanno bisogno di questa parte:..

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

webpack-dev-server di middleware lo farà per voi così, penso solo rimuoverlo lo risolverà

Answer 2

Prova relativa percorsi per attività statiche, ad esempio, invece di /public/, usa ./public/, come mostrato:

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

• E credo che si è certi che dove mai questo devServer.js è, esattamente nello stesso luogo ci sono una cartella parallela public esiste

• si sta colpendo localhost:3000/ e non localhost:3000

Se questo non funziona provare questo

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

Answer 3

Qualcosa di simile a questo è ciò che funziona per me:

cambiamento:

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

a:

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

poi cambiare app.get (s) a:

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(); 
}); 

Sono in grado di provare la configurazione particolare quindi mi chiedo se hai problemi con la prima app.get perché stai richiedendo un URL diverso da quello che stai servendo, cioè "/js/bundle.js" in "/public/js/bundle.js" Se è così, prova invece a path.join(__dirname, '/public/js/bundle.js') di req.url.

La seconda app.get dovrebbe servire index.html per qualsiasi richiesta non risolta che funzioni perfettamente per il routing React.