bundle.js mancante da webpack build quando si utilizza webpack-dev-server

Question

Ho guardato allo stesso modo ma non ho trovato una risposta concerete che risolvesse il mio problema. Non riesco a trovare il file bundle.js anche se sto specificando dove deve essere emesso e tutto funziona nel browser. Capisco che il server webpack-dev sta caricando i file dalla memoria e non viene scritto nulla sul disco, come posso ottenere il file da costruire e aggiunto alla directory specificata nella proprietà di output nel file di configurazione?

Ecco il mio 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

Questo pacchetto Web plugin obbliga il server a scrivere il pacchetto su disco.

Anche se sono d'accordo con Austin e lux, se è necessario disporre del file su disco, chiamare direttamente il webpack.

Answer 2

Quando si utilizza il server dev, l'uscita è disposto su esso. Quindi non lo vedrai effettivamente tra i tuoi file. Dal tuo file index.html dovrai caricarlo dal server.

Ad esempio, per la mia app carico nel server di sviluppo, i file del mio fornitore e quindi il mio codice personale.

<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> 

E qui è la parte rilevante della mia configurazione del webpack. Ci sono alcuni bit legacy inutili da quando lo stavo caricando anche da un bundle statico di build.

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

Si può anche dire al webpack di guardare utilizzando una bandiera nella configurazione. Questo genererà il file fascio

module.exports = { 
    watch: true, 
}; 

Answer 4

Sostituisci il tuo script oggetto di file di package.json con il seguente:

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

Quindi, eseguire $ npm start