webpack-dev-serverを使用しているときにwebpackビルドにbundle.jsがありません

Question

私は似たように見ましたが、私の問題を解決したconcereteの答えは見つかりませんでした。私は出力する必要がある場所を指定していて、すべてがブラウザで動作するにもかかわらず、bundle.jsファイルが見つかりません。 webpack-devサーバがメモリからファイルをロードしていて、何もディスクに書き込まれていない、ファイルをビルドして設定ファイルの出力プロパティに指定したディレクトリに追加する方法を理解していますか？

{ 
    "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の設定：

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

このWebpack pluginは、サーバーにバンドルのディスクへの書き込みを強制します。

私はAustinとluxに同意しますが、ファイルをディスクに保存する必要がある場合は、webpackを直接呼び出してください。

Answer 2

のdevのサーバーを使用して、出力がそれに置かれ

は、ここに私のpackage.jsonです。実際にはファイルの中には表示されません。あなたのindex.htmlファイルから、あなたはそれをサーバからロードしたいでしょう。

たとえば、私のアプリでは、devサーバー、ベンダーファイル、自分のコードを読み込みます。

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

ここで、私のwebpack設定の関連部分です。私が静的なビルドバンドルからロードしていた時から、いくつかの不要なレガシービットがあります。

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

webpackに設定でフラグを使用するよう通知することもできます。これは、バンドルファイルに

module.exports = { 
    watch: true, 
}; 

Answer 4

が生成されます、次のいずれかでpackage.jsonファイルのスクリプトオブジェクトを置き換えます。

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

をその後、私は前にこれを見てきたと信じて$ npm start