Webpack-dev-server: how to use multiple_entry_points with webpack-dev-server

Created on 28 Jan 2016  路  4Comments  路  Source: webpack/webpack-dev-server

when I use this code:

entry: {
    Profile: './profile.js',
    Feed: './feed.js'
}

how to use webpack-dev-server like this:

entry: [
  'webpack-dev-server/client?http://0.0.0.0:8080', 
  'webpack/hot/only-dev-server',
  './scripts/index' 
]

Most helpful comment

I just do

entry: {
    App: './scripts/index' ,
    Profile: './profile.js',
    Feed: './feed.js',
    Dev: [
        'webpack-dev-server/client?http://0.0.0.0:8080', 
        'webpack/hot/only-dev-server',
    ]
}

Add the dev stuff to it's own named entry

All 4 comments

I just do

entry: {
    App: './scripts/index' ,
    Profile: './profile.js',
    Feed: './feed.js',
    Dev: [
        'webpack-dev-server/client?http://0.0.0.0:8080', 
        'webpack/hot/only-dev-server',
    ]
}

Add the dev stuff to it's own named entry

@eisisig
it's good ,but the HotModuleReplacementPlugin is not work when I used like your's code.

'use strict'
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
//config.entry.unshift('webpack-dev-server/client?http://localhost:9090', "webpack/hot/dev-server");

config.entry.Dev = ['webpack-dev-server/client?http://localhost:9090', "webpack/hot/dev-server"];
config.plugins.push(new webpack.HotModuleReplacementPlugin());

//start app
var app = new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot:true,
    historyApiFallback: true
});
app.listen(9090);

I found this in one of my project. Tried it and it worked. So you can use that as reference

webpack.config.js (entry)

// ...
entry: {
    main: [
        './src/main'
    ]
},
output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].bundle.js',
    publicPath: 'http://localhost:9090/dist/',
    chunkFilename: '[id].js'
},
// ...

server.js

var express          = require('express'),
    app              = express(),
    webpack          = require('webpack'),
    WebpackDevServer = require('webpack-dev-server'),
    webpackConfig    = require('./webpack.config');

// Serve index page
app.get('*', function ( req, res ) {
    res.sendFile(__dirname + '/index.html');
});

webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin())

webpackConfig.entry.main = webpackConfig.entry.main.concat([
    'webpack-dev-server/client?http://localhost:9090',
    'webpack/hot/only-dev-server'
])

var webpackServer = new WebpackDevServer(webpack(webpackConfig), {
    publicPath: webpackConfig.output.publicPath,
    hot: true,
    historyApiFallback: true,
    stats: { colors: true }
});

webpackServer.listen(9090, 'localhost', function ( err ) {
    if ( err ) { console.log(err); }
});

var server = app.listen(8000, function () {
    var host = 'localhost';
    var port = server.address().port;

    console.log('React server listening at http://%s:%s', host, port);
});

index.html

<script src="http://localhost:9090/dist/main.bundle.js"></script>

ok锛宨t's good! thanks.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

da2018 picture da2018  路  3Comments

wojtekmaj picture wojtekmaj  路  3Comments

antoinerousseau picture antoinerousseau  路  3Comments

hnqlvs picture hnqlvs  路  3Comments

uMaxmaxmaximus picture uMaxmaxmaximus  路  3Comments