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'
]
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.
Most helpful comment
I just do
Add the dev stuff to it's own named entry