bundle.js brakuje w kompilacji pakietu sieciowego podczas korzystania z serwera Webpack-dev

Question

Przyjrzałem się podobnemu, ale nie mogłem znaleźć odpowiedzi, która rozwiązała mój problem. Nie mogę znaleźć pliku bundle.js, mimo że określam, gdzie powinien on być wyprowadzony i wszystko działa w przeglądarce. Rozumiem, że serwer webpack-dev ładuje pliki z pamięci i nic nie jest zapisywane na dysku, w jaki sposób mogę uzyskać plik do zbudowania i dodany do katalogu określonego we właściwości wyjściowej w pliku konfiguracyjnym?

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

Ten WebPACK plugin zmusza serwer do napisania pakiet na dysku.

Mimo że zgadzam się z Austinem i luxem, jeśli potrzebujesz pliku na dysku, zadzwoń bezpośrednio do webpacka.

Answer 2

W przypadku korzystania z serwera dev, wyjście jest umieszczony na nim. Więc nie zobaczysz tego wśród swoich plików. Z pliku index.html będziesz chciał załadować go z serwera.

Na przykład dla mojej aplikacji ładuję się na serwerze dev, pliki mojego dostawcy, a następnie mój własny kod.

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

Tutaj znajduje się odpowiednia część mojej konfiguracji Web Pack. Jest trochę niepotrzebnych starszych bitów, od kiedy również ładowałem go ze statycznego pakietu kompilacji.

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

Możesz także powiedzieć webpackowi, aby obejrzeć, używając flagi w konfiguracji. To wygeneruje plik wiązki

module.exports = { 
    watch: true, 
}; 

Answer 4

zastąpić skrypty przedmiot pliku package.json na następujący:

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

Następnie uruchom $ npm start