nodejs Webpack-dev-server js html ウェブブラウザ更新

webpack dev serverの設定メモ

  • エディタでjsをいじるとブラウザで自動リロードされる
  • htmlをいじると自動リロード
  • bundleも更新される(webpack-dev-serverはbundleしたものをメモリ上に置くので実態のファイル自体は更新されない?
  • その他

ファイル構成
f:id:katakanan:20190511101222p:plain
app/app.jsがあり、topファイル
publicにindex,jsがあり、bundle-app.jsも生成される。
package.json

{
・・・・
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/webpack",
    "start": "./node_modules/.bin/webpack --watch & ./node_modules/.bin/webpack-dev-server --hot --inline --progress --colors"
  },
・・・・
  "devDependencies": {
・・・・
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  }
}

webpack.config.js

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

module.exports = {
  mode: 'development',
  entry: './app/app.js',
  output: {
    path: path.join(__dirname, 'public/js'),
    filename: 'bundle-app.js'
  },
  devServer:{
    contentBase:'./public',
    publicPath: '/',
    watchContentBase: true,
    openPage: 'index.html',
    open: true,
  },
  plugins:[
    new HtmlWebpackPlugin({
      template : "./public/index.html"
    })
  ]
};

webpack-pluginとか要らないかもしれないが
いつまでも開発環境にこだわってると始まらないのでこれで