Zastępowanie serwera Webpack-dev programem ekspresowym + Webpack-Dev-Middleware/Webpack-Hot-Middleware

Question

Obecnie próbuję zastąpić moją starą konfigurację, która korzystała z serwera Webpack-dev z bardziej niezawodnym rozwiązaniem opartym na Express + webpack-middleware. Używam więc, aby uruchomić go w ten sposób: "webpack-dev-server - content-base public/--history-api-fallback", ale teraz chciałbym użyć go w ten sposób: "node devServer.js". Oto szczegóły mojej obecnej konfiguracji.

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

Czy możesz mi powiedzieć, gdzie mam zamiar tak? Byłem pod wrażeniem, że mam wszystkie podstawowe zasady, ale wyraźnie brakuje mi czegoś, ponieważ pomimo tego, że mam dostęp do html i js, strona nie wyświetla się. :(

Answer 1

Nie trzeba tę część..

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

WebPack-dev-serwer middleware zrobi to za Ciebie Tak, myślę, że po prostu usunięcie będzie go naprawić

Answer 2

Spróbuj względnej ścieżki na wartości statycznych, na przykład zamiast /public/ użyć ./public/, jak pokazano poniżej:

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

• I chyba jesteś pewny, że jeżeli kiedykolwiek to devServer.js jest, w dokładnie tym samym miejscu istnieje folder równoległy public istnieje

• Jesteś uderzenie localhost:3000/ a nie localhost:3000

Jeśli to nie działa, spróbuj to

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

Answer 3

Coś jak to, co działa dla mnie:

zmiana:

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

do:

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

Następnie zmienić app.get (ów):

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

jestem w stanie przetestować swoją szczególną konfigurację tak zastanawiam jeśli będziesz mieć problemy z pierwszym app.get, ponieważ żądasz innego adresu URL niż ten, który wyświetlasz, np. "/js/bundle.js" do "/public/js/bundle.js" Jeśli tak, spróbuj zamiast tego path.join(__dirname, '/public/js/bundle.js') z req.url.

Drugi app.get powinien obsługiwać index.html dla każdego nierozstrzygniętego żądania, które działa doskonale w routingu React.