webpack-dev-serverをexpress + webpack-dev-middleware/webpack-hot-middlewareに変更する

Question

私は現在webpack-dev-serverを使用していた古い設定をexpress + webpack-middleware。 私は "webpack-dev-server --content-base public/--history-api-fallback"のように実行しますが、これを "node devServer.js"のように使いたいと思います。 ここに私の現在の設定の詳細があります。

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

あなたは私が間違っているつもりだところを教えてもらえますか？私は印象に残っていたが、すべての基盤がカバーされていたが、htmlとjsにアクセスできるにもかかわらず、ページが表示されていないため、 :(

Answer 1

あなたはこの部分を必要としません：。

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

のWebPACK-devのサーバミドルウェアはあなたのためので、私はそれはそれを修正するだけで取り外すと思うことでしょう

Answer 2

相対試してみてください。示すように、静的な資産のパスは、代わりに/public/の例は、./public/使用：

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

• は、そして私はあなたがこのdevServer.jsは、正確に同じ場所で並列フォルダがありますされた場合、これまでpublicこれは試す動作しない場合はlocalhost:3000/なくlocalhost:3000

をヒットしている

が存在することが確実であると思いますこのように、この

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

Answer 3

何かが私のためにどのような作品です：

変更：へ

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

：私は思ったんだけど私はあなたの特定の設定をテストすることができません

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

：

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

その後にごapp.get（複数可）を変更します最初のapp.getに問題がある場合は、提供しているURLと異なるURLをリクエストしています。つまり、 '/js/bundle.js'を '/public/js/bundle.js'に変更する場合は、代わりにpath.join(__dirname, '/public/js/bundle.js')req.url。

2番目のapp.getは、未解決のリクエストについてはindex.htmlを提供する必要があり、これはリアクションルーティングに有効です。