web-dev-qa-db-fra.com

Remplacement de webpack-dev-server par express + webpack-dev-middleware/webpack-hot-middleware

J'essaie actuellement de remplacer mon ancienne configuration qui utilisait webpack-dev-server par une solution plus robuste basée sur express + webpack-middleware. Je l'utilisais donc comme ceci: "webpack-dev- server --content-base public/--history-api-fallback "mais j'aimerais maintenant l'utiliser comme ceci:" node devServer.js ". Voici les détails de ma configuration actuelle.

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

Pouvez-vous me dire où je vais mal? J'avais l'impression que toutes les bases étaient couvertes, mais il est clair qu'il me manque quelque chose car, malgré l'accès au HTML et au js, la page ne s'affiche pas. :(

javascriptexpresswebpackwebpack-dev-server
9
Bartekus

Vous n'avez pas besoin de cette partie:

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

le middleware webpack-dev-server le fera pour vous. Donc, je pense que le simple fait de le supprimer résoudra le problème.

4
okonetchnikov

Essayez les chemins relatifs pour les actifs statiques, par exemple au lieu de /public/, utilisez ./public/, comme indiqué:

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

  • Et je suppose que vous êtes sûr que partout où ce devServer.js est, il existe exactement au même endroit un dossier parallèle public 

  • Vous frappez localhost:3000/ et non localhost:3000

Si cela ne fonctionne pas, essayez ceci

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

Quelque chose comme ça est ce qui fonctionne pour moi:

changement:

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

à:

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

Puis changez votre app.get (s) en:

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

Je ne parviens pas à tester votre configuration particulière. Je me demande donc si vous rencontrez des problèmes avec la première application.get, car vous demandez une URL différente de celle que vous utilisez, par exemple, "/js/bundle.js" à "/ public". /js/bundle.js 'Si c'est le cas, essayez path.join(__dirname, '/public/js/bundle.js') au lieu de req.url.

La deuxième application.get devrait servir index.html pour toute requête non résolue, ce qui est très utile pour le routage React.

0
Greg Harley