Webpackを使用して基本的な反応アプリケーションをセットアップしましたが、webpack-dev-server
を正しく実行できませんでした。
ホットリロードが必要なため、webpack-dev-server
をグローバルにインストールし、コマンドSudo webpack-dev-server --hot
を実行しようとしました。
プロジェクトはwebpack
cmdだけでうまく機能しているようです。ビルドフォルダーにビルドされ、サーバー経由で動作するようになりますが、webpack-dev-server
では動作しません。ターミナルから、ビルドプロセスが[webpack: bundle is now VALID.
]がスローされることなく完了し、実際には適切に監視されていることは明らかです。変更があるとビルドプロセスがトリガーされますが、実際にはビルドされません[ t bundle.jsを提供します]。構成全体を変更しようとしても、問題を解決できませんでした。
誰か助けていただければ幸いです。
以下は私のwebpack.config.jsファイルです。
var path = require('path');
module.exports = {
devtool: '#inline-source-map"',
watch: true,
colors: true,
progress: true,
module: {
loaders: [{
loader: "babel",
include: [
path.resolve(__dirname, "src"),
],
test: /\.jsx?$/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'react', 'stage-0'],
}
}, {
loader: 'style!css!sass',
include: path.join(__dirname, 'src'),
test: /\.scss$/
}]
},
plugins: [],
output: {
path: path.join(__dirname, 'build/js'),
publicPath: '/build/',
filename: '[name].js'
},
entry: {
bundle: [
'./src/index.js'
]
},
devServer: {
contentBase: "./",
inline: true,
port: 8080
},
};
私は自分で問題を解決しました。ばかげているようですが、問題はpublicPath
オブジェクトの下のoutput
にありました。 /build/
だけではなく、path
プロパティと一致する必要があります。
output: {
path: path.join(__dirname, 'build/js'),
publicPath: '/build/js', // instead of publicPath: '/build/'
filename: '[name].js'
},
私の場合、webpackがファイルを提供している場所を確認する必要がありました。
見れば分かります: http://localhost:8080/webpack-dev-server
その後、bundle.jsのパスを見ることができました> http:// localhost:8080/dist/bundle.js
その後、_/dist/bundle.js
私のindex.html <script src="/dist/bundle.js"></script>
これで、ファイルの変更が更新されます。
webpack-dev-serverは、メモリからbundle.jsを提供します。実行時にファイルは生成されません。したがって、bundle.jsはこのシナリオではファイルとして存在しません。
Bundle.jsを使用したくない場合、たとえばサイズを最適化したり、実稼働デプロイメントをテストしたりする場合は、webpackコマンドを使用してwebpackで生成し、実稼働モードで提供します。
開発サーバーはコンパイルされたファイルをメモリに保持しますが、直接アクセスすることはできません...しかし!解決策は、開発中にアクセスする必要がないことです(ノードサーバーまたはlocalhostでプロジェクトを実行する場合でも)localhost:8080を使用してページにアクセスし、webpack-dev-serverがページを提供します。それを使用するすべての利点を感じることができます(ライブリロード!)、しかし! bundle.jsはコンパイルされません。実稼働前に、webpack buildコマンドを手動で実行する必要があります。 dev-serverがbundle.jsファイルをコンパイルする方法はありません!がんばろう!