Webpack-dev-sunucusunu express + webpack-dev-middleware/webpack-hot-middleware ile değiştirme

Question

Şu anda webpack-dev-server kullanan eski kurulumumu express + tabanlı daha sağlam bir çözümle değiştirmeye çalışıyorum. webpack-katman. Bu yüzden şu şekilde çalıştırmak için kullanıyorum: "webpack-dev-server --content-base public/--history-api-fallback" ama şimdi bunu kullanmak istiyorum: "node devServer.js". Güncel kurulumumun ayrıntıları.

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

yanlış nereye gidiyorum söyleyebilir misin? Tüm üsleri kaplamış olduğum izlenimindeydim, ama html ve js'ye erişemememden dolayı bir şey eksikliğini açıkça görüyorum, sayfa gösterilmiyor. . :(

Answer 1

Bu kısmı gerekmez.

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

webpack-dev-sunucu katman Yani, sadece bunu çözecektir çıkarmadan düşünüyorum sizin için yapacak

Answer 2

göreli deneyin gösterildiği gibi statik varlıklar için yollar yerine /public/ ör, ./public/ kullanın:

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

• Ve senin bu devServer.js, tam olarak aynı yerde paralel bir klasör vardır nerede hiç public bu deneyin işe yaramazsa Sen localhost:3000/ değil localhost:3000

vuruyor

var olduğundan emin tahmin böyle bu

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

Answer 3

şey benim için çalışıyor budur:

değişikliği:

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

için:

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

Ardından için app.get (ler) değiştirin: ki özel yapılandırmasını test alamıyorum

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

merak ediyorum bu yüzden ilk app.get ile ilgili sorunlarınız varsa, siz sunduğunuzdan farklı bir URL istemeniz, yani '/js/bundle.js' yerine '/public/js/bundle.js' yazmanız gerekiyorsa, bunun yerine path.join(__dirname, '/public/js/bundle.js')'u deneyin. req.url.

İkinci app.get, React yönlendirmesi için harika çalışan herhangi bir çözümlenmemiş istek için index.html'yi sunmalıdır.