2017-02-26 4 views
3

webpackを最初から教えています。アプリファイルの.jsを変更して変更を表示するときにwebpack-dev-serverを使用してライブを更新しようとしています。私が持っていると言うpackage.jsonファイルを保存するときにwebpack-dev-serverがバンドルを更新しない

{ 
    "name": "webpack-babel", 
    "version": "1.0.0", 
    "description": "", 
    "main": "webpack.config.js", 
    "scripts": { 
    "serve": "webpack-dev-server --hot", 
    "start": "webpack" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.23.1", 
    "babel-loader": "^6.3.2", 
    "babel-preset-es2015": "^6.22.0", 
    "webpack": "^2.2.1", 
    "webpack-dev-server": "^2.4.1" 
    } 
} 

を以下の、これは私のwebpack.config.json

const path = require('path'); 

    const config = { 
     entry: './app/index.js', 
     output: { 
      path: path.resolve(__dirname, 'dist'), 
      filename: 'bundle.js' 
     }, 
     module: { 
      rules: [ 
       { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader', 
        query: { 
         presets: ['es2015'] 
        } 
       } 
      ], 
     } 
    }; 

    module.exports = config; 

あるI持って私の./app/index.jsに次のコード(ここではクレイジーなし):

let message = 'I love socks and snacks !'; 
console.log(message); 

私は'I love cola and snacks !!!'に私のapp/index.jsnpm run serve変更メッセージを実行すると、端末を保存してコンパイルんが、何もUPDATではありませんブラウザで編集します。バンドルファイルにはまだ古いメッセージが含まれており、生成されていません。私は間違って何をしていますか?私は数時間前にこれを試し始めたので、私はwebpackで少し新生です。

私は私のIDEで「安全な書き込み」をオフにしていると、私のファイル構造がそうのようなものです:

enter image description here

これが私のindex.htmlです...

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
<script src="dist/bundle.js"></script> 
</body> 

* UPDATE * publicPath:'dist/ 'をoutput objecに追加するtはうまくいくようですが、これが私の問題の正しい解決策であるかどうかはわかりません。

+1

webpack devサーバーはディスクに何も書き込まれません。それはすべてメモリ上で提供されます。 –

答えて

5

バンドルファイルには以前のメッセージが含まれていて、まだ生成されていません。

は、ファイルを作成しませんが、該当するパスがヒットしたときにメモリからバンドルを提供します。デフォルトでは/なので、/bundle.jsをロードしようとすると、メモリからバンドルが取得されます。

index.htmlの場合は、/dist/bundle.jsをリクエストしてください。最初に見つけられる唯一の理由は、あなたがそれを生成して実際にあなたのファイルシステムに存在しているからです。明確にするためにあなたがに行く場合:

http://localhost:8080/dist/bundle.js 

あなたは、ファイル・システムからバンドルを取得しますが、あなたがに行くとき:

http://localhost:8080/bundle.js 

それはdoesnのが、あなたは、webpack-dev-serverによりメモリからバンドルを取得しますファイルシステムに存在しません。

正常に検査したので、publicPathオプションを使用してそのパスを変更できます。そのため、を設定すると、ファイルがファイルシステムに存在するかどうかにかかわらず、/dist/bundle.jsがヒットした場合にwebpack-dev-serverがメモリからバンドルを提供します。

設定output.publicPathは、example of html-loaderに示すように、アセットを含むローダーにも影響します。そのような効果が得られない場合は、代わりにwebpack-dev-serverの動作を変更するためにdevServer.publicPathを使用できます。しかし、ドキュメントに記載されているように、それらが同じであることが推奨されます。

+0

このような徹底的な説明をありがとうございます! –

関連する問題