web-dev-qa-db-de.com

Ersetzen des Webpack-Dev-Servers durch Express + Webpack-Dev-Middleware/Webpack-Hot-Middleware

Ich versuche gerade, mein altes Setup, das webpack-dev-server verwendet, durch eine robustere Lösung zu ersetzen, die auf express + webpack-Middleware basiert. Ich verwende es daher so: server --content-base public/--history-api-fallback "aber jetzt möchte ich es so verwenden:" node devServer.js ". Hier sind die Details meines aktuellen Setups.

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

Kannst du mir sagen, wo ich falsch liege? Ich hatte den Eindruck, dass ich alle Grundlagen abgedeckt habe, aber es fehlt mir eindeutig etwas, da die Seite trotz des Zugriffs auf HTML und Js nicht angezeigt wird. :(

9
Bartekus

Sie brauchen diesen Teil nicht:

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

die Middleware von webpack-dev-server erledigt das für Sie. Ich denke also, wenn Sie es einfach entfernen, wird es behoben.

4
okonetchnikov

Versuchen Sie relative Pfade für statische Assets, z. B. anstelle von /public/, verwenden Sie ./public/ wie gezeigt:

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'));
});
  • Und ich denke, Sie sind sicher, dass, wo immer dieser devServer.js ist, an genau derselben Stelle ein paralleler Ordner public existiert 

  • Sie treffen localhost:3000/ und nicht localhost:3000

Wenn dies nicht funktioniert, probieren Sie es aus

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

So etwas funktioniert für mich:

veränderung:

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

zu:

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

Dann ändern Sie Ihre app.get (s) in:

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

Ich kann Ihre spezielle Konfiguration nicht testen, daher frage ich mich, ob Sie Probleme mit dem ersten app.get haben, weil Sie eine andere URL als die angeforderte anfordern, z /js/bundle.js 'Wenn ja, probiere path.join(__dirname, '/public/js/bundle.js') anstelle von req.url.

Das zweite app.get sollte index.html für alle nicht aufgelösten Anforderungen bereitstellen, die sich hervorragend für das React-Routing eignen.

0
Greg Harley