webpack production config (react, es6) - node.js

Question

I have webpack configuration for site development using ES6, react and react-router. It uses developer server with hot-reload and routes.
/config/webpack.dev:
var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.join(__dirname, '..', 'app');
module.exports = {
debug: true,
devtool: 'eval',
entry: ['webpack-hot-middleware/client', './app/index.js'],
module: {
preLoaders: [{
test: /\.js?$/,
loaders: ["babel-loader", "eslint-loader"],
exclude: /node_modules/,
include: APP_DIR
}],
loaders: [
{test: /\.js?$/, loaders: ['react-hot', 'babel'], include: APP_DIR},
{
test: /\.scss$/, include: APP_DIR,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
},
{
test: /\.css$/, include: APP_DIR,
loader: "style!css!autoprefixer?browsers=last 2 version!"
},
{test: /\.(jpe?g|png|gif|svg)$/i, loaders: ['url?limit=8192', 'img']},
{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"}
]
},
output: {
filename: 'app.js',
path: path.join(__dirname, '..', 'build'),
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
root: [path.resolve('../app')],
extensions: ['', '.jsx', '.js']
},
sassLoader: {
includePaths: [path.resolve(__dirname, "./app")]
}
};
I run build by npm start. Fragment of my package.json:
...
scripts": {
"build:webpack": "NODE_ENV=production webpack --config config/webpack.prod.js",
"clean": "rimraf build",
"start": "node dev_server.js"
}
...
dev_server.js:
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./config/webpack.dev');
var app = express();
var compiler = webpack(config);
var port = process.env.PORT || 3000;
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
app.use(express.static(path.join(__dirname, '..', 'static')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(port, 'localhost', err => {
if (err) {
console.log(err);
return;
}
console.log(`Listening at http://localhost:${port}`);
});
I also have /config/webpack.prod:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanPlugin = require('clean-webpack-plugin');
var APP_DIR = path.join(__dirname, '..', 'app');
var projectRootPath = path.resolve(__dirname, '../');
var assetsPath = path.resolve(projectRootPath, './build');
module.exports = {
devtool: 'source-map',
context: path.resolve(__dirname, '..'),
entry: './app/index.js',
module: {
loaders: [
{
test: /\.js?$/,
loaders: ['babel'],
include: APP_DIR
},
{
test: /\.scss$/, include: APP_DIR,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
},
{
test: /\.css$/, include: APP_DIR,
loader: "style!css!autoprefixer?browsers=last 2 version!"
},
{test: /\.(jpe?g|png|gif|svg)$/i, loaders: ['url?limit=8192', 'img']},
{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}]
},
output: {
path: assetsPath,
filename: 'app.js',
publicPath: '/build/'
},
plugins: [
new CleanPlugin([assetsPath], { root: projectRootPath }),
new ExtractTextPlugin('[name]-[chunkhash].css', {allChunks: true}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
],
progress: true,
resolve: {
root: [path.resolve('../app')],
extensions: ['', '.jsx', '.js']
},
sassLoader: {
includePaths: [path.resolve(__dirname, "./app")]
}
};
I run it by npm run build. It generate file in app directory. But when i open index.html in browser, page is empty. In firefox inspector i have comment: react-empty: 1
How can I use webpack to build my project to use it in browser without server?

Answer 1

I suggest using write-file-webpack-plugin to write bundled contents to disk and you should be able to open index.html in browser and start using the app without any server.
But remember that if you have used browserHistory from 'react-router' then it wouldn't work without configuring a server. You will have to replace it with hashHistory.
react-router documentation states
Hash history uses the hash (#) portion of the URL, creating routes
that look like example.com/#/some/path.
Hash history works without configuring your server, so if you're just
getting started, go ahead and use it. In general, though, production
web applications should use browserHistory for the cleaner URLs, and
for support for server-side rendering, which is impossible with
hashHistory.