web-dev-qa-db-ja.com

Webpack-dev-serverはファイルをコンパイルしますが、ブラウザーで更新されたり、コンパイルされたJavaScriptを使用可能にしたりしません

Webpack-dev-serverを使用してファイルをコンパイルし、dev Webサーバーを起動しようとしています。

package.jsonには、スクリプトプロパティが次のように設定されています。

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

したがって、--hotおよび--inlineは、Webサーバーとホットリロードを有効にする必要があります（私が理解しているとおり）。

webpack.config.jsファイルで、エントリー、出力、およびdevServer設定を設定し、ローダーを追加して.vueファイルの変更を探します。

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

このセットアップでは、npm run devを実行します。 webpack-dev-serverが起動し、モジュールローダーテストは機能します（つまり、.vueファイルを保存するとwebpackが再コンパイルされます）が、

  • ブラウザが更新されない
  • メモリに保存されるコンパイル済みのJavaScriptは、ブラウザで使用可能になることはありません

ブラウザのウィンドウでvueプレースホルダーが置き換えられることはなく、javascriptコンソールを開くとVueインスタンスが作成されたり、グローバルに利用可能になったりすることはないため、 。

Gif of issue

私は何が欠けていますか？

javascriptwebpackvue.jswebpack-dev-server
64
Chris Schmitz

ここで2つのことが問題を引き起こしていました。

module.exports = {
    entry: './src/index.js',
    output: {

        // For some reason, the `__dirname` was not evaluating and `/public` was
        // trying to write files to a `public` folder at the root of my HD.
        path: __dirname + '/public', 

        // Public path refers to the location from the _browser's_ perspective, so 
        // `/public' would be referring to `mydomain.com/public/` instead of just
        // `mydomain.com`.
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{

        // `contentBase` specifies what folder to server relative to the 
        // current directory. This technically isn't false since it's an absolute
        // path, but the use of `__dirname` isn't necessary. 
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

固定webpack.config.jsは次のとおりです。

var path = require('path');

module.exports = {
    entry: [
        './src/PlaceMapper/index.js'
    ],
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/')
    },
    devtool: 'source-map',
    devServer:{
        contentBase: 'public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};
59
Chris Schmitz

長い検索の後、私の問題の解決策を見つけました。私の場合はoutput pathが正しく構成されていませんでした。

この構成は私の問題を解決しました：

const path = require('path');

module.exports = {
  "entry": ['./app/index.js'],
  "output": {
    path: path.join(__dirname, 'build'),
    publicPath: "/build/",
    "filename": "bundle.js"
  }....
14
Serdar Değirmenci

私は同じ問題を抱えていたので、これらすべてのポイントに加えて、index.htmlと出力bundle.jsを同じフォルダーに入れ、contentBaseをこのフォルダー（ルートまたはサブフォルダー）に設定する必要があることがわかりました。

4
Bing

ExtractTextPluginが原因で発生する可能性があります。開発モードでExtractTextPluginを非アクティブにします。本番ビルドにのみ使用します。

2
Serdar Değirmenci

これは、同じwebpack-dev-serverポートで2つの異なるアプリケーションを次々に実行した後にも起こりました。これは、他のプロジェクトがシャットダウンされた場合でも起こりました。使用されていないポートに変更すると、直接動作し始めました。

devServer: {
    proxy: {
        '*': {
            target: 'http://localhost:1234'
        }
    },
    port: 8080,
    Host: '0.0.0.0',
    hot: true,
    historyApiFallback: true,
},

私のようなChromeを使用する場合は、Developer Toolsを開いてClear site dataをクリックしてください。また、シークレットモードでサイトを実行すると、これが問題であるかどうかを確認できます。

enter image description here

1
Ogglas

正しい解決策

dev-serverにwatchに devServer.watchContentBase オプションによって提供されるファイルを伝えます。

デフォルトでは無効になっています。

有効にすると、ファイルの変更によりフルページのリロードがトリガーされます。

例：

module.exports = {
  //...
  devServer: {
    // ...
    watchContentBase: true
  }
};
1
Shakiba Moshiri

どういうわけか、私の場合、「-hot」を削除すると機能します。そこで、hot: trueを削除しました

webpack.dev.js

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    publicPath: '/js/',
    contentBase: path.resolve(__dirname, 'docs'),
    watchContentBase: true,
  }
});

webpack.common.js

  output: {
    path: path.resolve(__dirname, 'docs/js'),
    filename: '[name].min.js',
    library: ['[name]']
  },
0
Polv

webpack-dev-serverがindex.htmlファイルを提供しているが、更新していないという同様の状況を経験しました。いくつかの投稿を読んだ後、webpack-dev-serverは新しいjsファイルを生成せず、代わりにindex.htmlに挿入することに気付きました。

html-webpack-pluginをアプリに追加し、webpack.config.jsファイルに次の構成を追加しました。

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]

次に、index.htmlのエントリjsファイルを参照するスクリプトタグをコメントアウトしました。フラグを追加せずにwebpack-dev-serverを実行できるようになり、ファイルへの変更がブラウザに即座に表示されます。

0
nflauria

ここで苦しみの壁にWebpack --watch woeの私自身の特別な物語を追加します。

私は走っていた

webpack --watch

typeScriptプロジェクトをビルドするため。コンパイルされた.jsファイルは更新されますが、ブラウザーが表示していたバンドルは更新されませんでした。だから私は基本的にOPと同じ立場にいました。

私の問題はwatchOptions.ignoredパラメーターに帰着しました。ビルド構成の元の作成者はignoredをフィルター関数として設定していましたが、フィルター関数はそのパラメーターの有効な値ではないことが判明しました。フィルター関数を適切なRegExpに置き換えると、--watchビルドが再び機能します。

0
tel

プロジェクトツリーは明確ではありませんが、contentBase設定に問題がある可能性があります。 contentBaseを設定してみてください：__dirname

0
Ойбек Абдуллаев

私の場合は、Webpack機能の実験に深く入り込んでいたが、そのように注入をfalseに設定していたことを完全に忘れていた...

 new HTMLWebpackPlugin({
        inject: false,
        ...
 }),

それを切り替えることは私のチケットでした。

0
klewis