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.js
でnpm run serve
変更メッセージを実行すると、端末を保存してコンパイルんが、何もUPDATではありませんブラウザで編集します。バンドルファイルにはまだ古いメッセージが含まれており、生成されていません。私は間違って何をしていますか?私は数時間前にこれを試し始めたので、私はwebpackで少し新生です。
私は私のIDEで「安全な書き込み」をオフにしていると、私のファイル構造がそうのようなものです:
これが私の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はうまくいくようですが、これが私の問題の正しい解決策であるかどうかはわかりません。
webpack devサーバーはディスクに何も書き込まれません。それはすべてメモリ上で提供されます。 –