web-dev-qa-db-ja.com

webpack-dev-serverをexpress + webpack-dev-middleware / webpack-hot-middlewareに置き換える

私は現在、webpack-dev-serverを使用していた古いセットアップを、express + webpack-middlewareに基づくより堅牢なソリューションに置き換えようとしています。したがって、以前は「webpack-dev-server --content-base public/--history-api-fallback」のように実行していましたが、今は「nodedevServer.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にアクセスできるにもかかわらず、ページが表示されていないため、明らかに何かが欠けています。 :(

javascriptexpresswebpackwebpack-dev-server
11
Bartekus

この部分は必要ありません：

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

webpack-dev-serverミドルウェアがそれを行います。ですから、削除するだけで直ると思います。

6
okonetchnikov

このようなものが私のために働くものです：

変化する：

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

に：

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

次に、app.get（s）を次のように変更します。

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

特定の構成をテストできないため、提供しているものとは異なるURL、つまり「/js/bundle.js」から「/ public」をリクエストしているため、最初のapp.getで問題が発生するかどうか疑問に思います。 /js/bundle.js 'その場合は、_req.url_の代わりにpath.join(__dirname, '/public/js/bundle.js')を試してください。

2番目のapp.getは、Reactルーティングに最適な未解決のリクエストに対してindex.htmlを提供する必要があります。

1
Greg Harley

静的アセットの相対パスを試してください。たとえば、/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'
}));
1
sapy