webpack production config (reagieren, es6)

Question

Ich habe Webpack-Konfiguration für die Website-Entwicklung mit ES6, reagieren und reagieren-Router. Es verwendet einen Entwicklerserver mit Hot-Reload und Routen.

/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")] 
    } 
}; 

ich von npm bauen laufen beginnen. Fragment meiner 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}`); 
}); 

Ich habe auch /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")] 
    } 
}; 

Ich betreibe es von npm run build. Es generiert Datei im App-Verzeichnis. Aber wenn ich index.html im Browser öffne, ist die Seite leer. In firefox Inspektoren Ich habe Kommentar: reagiert leer: 1

Wie kann ich webpack mein Projekt erstellen, ohne Server im Browser zu benutzen?

Answer 1

Ich empfehle mit write-file-webpack-plugin gebündelte Inhalte auf die Festplatte zu schreiben und Sie sollten in der Lage sein, index.html im Browser zu öffnen und die Anwendung ohne Server zu starten.

Aber denken Sie daran, wenn Sie browserHistory von 'react-router' verwendet haben, dann würde es nicht funktionieren, ohne einen Server zu konfigurieren. Sie müssen es durch hashHistory ersetzen.

react-router documentation heißt

Hash Geschichte der Raute (#) Teil der URL verwendet, Erstellen von Routen , die wie example.com/#/some/path aussehen.

Hash-Verlauf funktioniert, ohne Ihren Server zu konfigurieren, also wenn Sie nur beginnen, gehen Sie voran und verwenden Sie es. Im Allgemeinen sollten die Produktions-Webanwendungen browserHistory für die saubereren URLs und für die Unterstützung des serverseitigen Renderns verwenden, was mit hashHistory nicht möglich ist.