はじめに
ファイル構成をちょっと変えたときにwebpack-dev-serverのホットリロードが全く動かなくなった
webpack-dev-serverのauto-reloadでハマったこと を読んだら、ファイル構成を変えて(index.htmlをbundle.jsの出力先と同じ階層に置く？)解決していたが、自分はファイル構成変えたくなかったので調べた
なんとなく「webpack-dev-server 自動更新 されない」とかで解決策が出てきにくい気がしたので残しておく
環境
ファイル構成
project
|--dist
| |--index.html
| |--js
| |--bundle.js (出力されるjs)
|--src
| |--js
| |---index.js (バンドルするjs)
| |---module.js (indexで読み込むmodule)
|--webpack.config.js
package.json (略)
package.json
"scripts": {
"start": "webpack-dev-server --open",
"watch": "webpack --watch",
},
"devDependencies": {
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
webpack.config.js (略)
webpack.config.js
const path = require('path');
const outputPath = path.resolve(__dirname,'dist/js');
const webpack = require('webpack');
module.exports = {
entry: './src/js/index.js', // エントリポイント
output: {
path: outputPath,
filename: 'bundle.js' // バンドル後のファイル
},
devServer: {
contentBase: path.resolve(__dirname, 'dist/'),
inline: true,
hot: true
}
}
module.js
module.js
export default function hello(){
console.log('Hello, webpack!!');
}
これをindex.jsでimportしている
実行
$ npm run watch
$ npm start
この状態でmodule.jsを適当に変更
module.js
export default function hello(){
// console.log('Hello, webpack!!');
console.log('Reloaded');
}
これでホットリロードを期待してたけどなぜか動かない
解決策
webpack.config.jsのoutputにpublicPathを追加したら動くようになった
webpack.config.js
// ~~~~~~~~~~~~~~~~~~~~~~~ //
module.exports = {
output: {
path: outputPath,
+ publicPath: '/js/',
filename: 'bundle.js'
},
// ~~~~~~~~~~~~~~~~~~~~~~~ //
publicPathとは？
ここに詳しく書いてあるような気がする
Webpackの "publicPath"は何をするのですか？