bundle.js fehlt in webpack build bei der Verwendung von webpack-dev-server

Question

Ich schaute auf ähnlich, konnte aber keine konkrete Antwort finden, die mein Problem löste. Ich kann die Datei bundle.js nicht finden, obwohl ich festlege, wo sie ausgegeben werden soll und alles im Browser funktioniert. Ich verstehe, dass der Webpack-dev-Server die Dateien aus dem Speicher lädt und nichts auf die Festplatte geschrieben wird, wie kann ich die Datei erstellen und zum Verzeichnis hinzufügen, das in der Ausgabe-Eigenschaft in der Konfigurationsdatei angegeben ist?

Hier ist meine package.json:

{ 
    "name": "redux-simple-starter", 
    "version": "1.0.0", 
    "description": "Simple starter package for Redux with React and Babel support", 
    "main": "index.js", 
    "repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git", 
    "scripts": { 
    "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js -- content-base build" 
     }, 
     "author": "", 
     "license": "ISC", 
     "devDependencies": { 
     "babel-core": "^6.2.1", 
     "babel-loader": "^6.2.0", 
     "babel-preset-es2015": "^6.1.18", 
     "babel-preset-react": "^6.1.18", 
     "react-hot-loader": "^1.3.0", 
    "webpack": "^1.12.9", 
    "webpack-dev-server": "^1.14.0" 
    }, 
    "dependencies": { 
    "babel-preset-stage-1": "^6.1.18", 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3", 
    "react-redux": "^4.0.0", 
    "redux": "^3.0.4" 
    } 
    } 

webpack config:

var path = require('path'); 
    var webpack = require('webpack'); 

    module.exports = { 
    entry: [ 
     'webpack-dev-server/client?http://localhost:8080', 
     'webpack/hot/only-dev-server', 
     './src/index.js' 
    ], 
    output: { 
     path: path.join(__dirname, 'assets'), 
     publicPath: '/', 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel' 
     }] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
     contentBase: './' 
    }, 

    plugins: [ 
     new webpack.HotModuleReplacementPlugin() 
    ] 
    };  

Answer 1

Dieses Webpack plugin zwingt den Server, das Bundle auf die Festplatte zu schreiben.

Obwohl ich mit Austin und lux einverstanden bin, rufen Sie webpack direkt auf, wenn Sie die Datei auf der Festplatte haben müssen.

Answer 2

Wenn die dev-Server verwenden, wird der Ausgang auf sie gesetzt wird. Sie werden es also nicht wirklich in Ihren Dateien sehen. Von Ihrer index.html Datei wollen Sie sie vom Server laden.

Zum Beispiel, für meine App lade ich in Dev-Server, meine Hersteller-Dateien, und dann meinen eigenen Code.

<script src="http://localhost:8080/webpack-dev-server.js"></script> 
<script src="http://localhost:8080/build/vendor.js"></script> 
<script src="http://localhost:8080/build/app.js"></script> 

Und hier ist der relevante Teil meiner Webpack-Konfiguration. Es gibt einige unnötige Legacy-Bits von, als ich es auch aus einem statischen Build-Bundle geladen habe.

app: [ 
     'webpack/hot/dev-server', 
     'webpack-dev-server/client?http://localhost:8080', 
     './client/index.js' 
     ] 

}, 
output: { 
    path: __dirname + '/client/build', 
    publicPath: '/build/', 
    filename: '[name].js', 
    pathinfo: true 
}, 

Answer 3

Sie können Webpack auch mit einem Flag in der Konfiguration überwachen. Dadurch wird die Bundle-Datei

module.exports = { 
    watch: true, 
}; 

Answer 4

Ersetzen Sie Ihre Skripte Aufgabe package.json Datei mit dem man folgende erzeugen:

"scripts": { 
    "start": "npm run build", 
    "build": "webpack -p && ./node_modules/webpack-dev-server/bin/webpack-dev-server.js -- content-base build" 
}, 

Dann $ npm start laufen