web-dev-qa-db-ja.com

バンドル有効なメッセージを表示した後でもWebpack-dev-serverがバンドルされない

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
    },
};
javascriptnode.jsreactjswebpackwebpack-dev-server
26
Karthik Rana

私は自分で問題を解決しました。ばかげているようですが、問題はpublicPathオブジェクトの下のoutputにありました。 /build/だけではなく、pathプロパティと一致する必要があります。

output: {
    path: path.join(__dirname, 'build/js'),
    publicPath: '/build/js', // instead of publicPath: '/build/' 
    filename: '[name].js'
},
41
Karthik Rana

私の場合、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>

これで、ファイルの変更が更新されます。

23
Andre Evangelista

webpack-dev-serverは、メモリからbundle.jsを提供します。実行時にファイルは生成されません。したがって、bundle.jsはこのシナリオではファイルとして存在しません。

Bundle.jsを使用したくない場合、たとえばサイズを最適化したり、実稼働デプロイメントをテストしたりする場合は、webpackコマンドを使用してwebpackで生成し、実稼働モードで提供します。

11
Mark

開発サーバーはコンパイルされたファイルをメモリに保持しますが、直接アクセスすることはできません...しかし！解決策は、開発中にアクセスする必要がないことです（ノードサーバーまたはlocalhostでプロジェクトを実行する場合でも）localhost：8080を使用してページにアクセスし、webpack-dev-serverがページを提供します。それを使用するすべての利点を感じることができます（ライブリロード！）、しかし！ bundle.jsはコンパイルされません。実稼働前に、webpack buildコマンドを手動で実行する必要があります。 dev-serverがbundle.jsファイルをコンパイルする方法はありません！がんばろう！

0
Oleksandr Grin