[webpack4][npm]自動的にファイルを更新・ブラウザリロードを1つのコマンドで実現したい

前提・実現したいこと

webpackを利用してvue.jsでSPAを作ろうとしています。
watchモードを利用していてwebpackコマンドでファイルの監視がされ更新されることは確認しました。
また、webpack-dev-serverコマンドもサーバーは起動されることは確認しました。

しかし、webpack-dev-serverではブラウザの自動リロードがされません。

https://webpack.js.org/configuration/watch/
↑では、webpack-dev-serverコマンドのwatchモードはデフォルトで有効になっていると書かれています。

なので、webpackコマンドのwatchモードを有効にすれば、webpack-dev-serverも自動的に実行されるだろうと思っていましたが、そうではないようです。

そして、
npm run waetchをするとファイル監視と更新が自動で行われるのみで
npm run start:devだとサーバーの立ち上げのみが行われ、ファイルの監視や自動リロードはされません。(リロードすると変更内容が反映されています。)

今回実現したいことは、webpackコマンドもしくは1つのコマンドでファイルの監視・更新・ブラウザリロードを自動化することです。

お手数ですが、よろしくお願いいたします！

環境

ディレクトリ構造

├── dist
│   ├── assets
│   │   ├── css
│   │   ├── img
│   │   └── js ← bundle.jsが入っています
│   └── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── app.js
│   ├── assets
│   │   ├── js
│   │   └── sass
│   ├── pages
│   │   ├── About.vue
│   │   └── Home.vue
│   └── router.js
└── webpack.config.js

該当のソースコード

webpack.config.js

json
1{
2  "name": "hoge",
3  "version": "1.0.0",
4  "description": "",
5  "private": true,
6  "dependencies": {
7    "axios": "^0.18.0",
8    "node-sass": "^4.11.0",
9    "sass-loader": "^7.1.0",
10    "vue": "^2.5.22"
11  },
12  "devDependencies": {
13    "@babel/core": "^7.2.2",
14    "@babel/preset-env": "^7.3.1",
15    "autoprefixer": "^9.4.7",
16    "babel-loader": "^8.0.5",
17    "css-loader": "^2.1.0",
18    "eslint": "^5.13.0",
19    "eslint-loader": "^2.1.1",
20    "extract-text-webpack-plugin": "^4.0.0-beta.0",
21    "mini-css-extract-plugin": "^0.5.0",
22    "postcss-loader": "^3.0.0",
23    "vue-loader": "^15.6.2",
24    "vue-router": "^3.0.2",
25    "vue-template-compiler": "^2.5.22",
26    "webpack": "^4.29.0",
27    "webpack-cli": "^3.2.1",
28    "webpack-dev-server": "^3.1.14"
29  },
30  "scripts": {
31    "test": "echo \"Error: no test specified\" && exit 1",
32    "watch": "webpack --watch", // ファイル監視のみ
33    "start:dev": "webpack-dev-server" // ブラウザ起動のみ
34  },
35{{略}}

webpack.config.json

javascript
1// const webpack = require('webpack');
2const VueLoaderPlugin = require('vue-loader/lib/plugin');
3const path = require('path');
4
5const ExtractTextPlugin = require('extract-text-webpack-plugin');
6// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
7
8const MODE = 'development';
9const enabledSourceMap = (MODE === 'development');
10
11
12module.exports = {
13  watch: true,
14  watchOptions: {
15    poll: true
16  },
17  mode: MODE,
18  entry: './src/app.js',
19  output: {
20    filename: './js/bundle.js',
21    path: path.join(__dirname, 'dist/assets/')
22  },
23  module: {
24    rules: [
25      {
26        test: /.js$/,
27        exclude: /node_modules/,
28        use: [
29          {
30            loader: 'babel-loader',
31            options: {
32              presets: [['@babel/preset-env', { modules: false }]]
33            }
34          }
35        ]
36      },
37      {
38        enforce: 'pre',
39        test: /.js$/,
40        exclude: /node_modules/,
41        loader: 'eslint-loader'
42      },
43      {
44        test: /.vue$/,
45        loader: 'vue-loader'
46      },
47      {
48        test: /.scss$/,
49        use: ExtractTextPlugin.extract({
50          use:[
51            // {
52            //   loader: MiniCssExtractPlugin.loader
53            // },
54            {
55              loader: 'css-loader',
56              options: {
57                url: false,
58                sourceMap: enabledSourceMap,
59                importLoaders: 2
60              }
61            },
62            {
63              loader: 'postcss-loader',
64              options: {
65                sourceMap: enabledSourceMap,
66                plugins: [
67                  require('autoprefixer')({grid: true})
68                ]
69              },
70            },
71            {
72              loader: 'sass-loader',
73              options: {
74                sourceMap: enabledSourceMap,
75              }
76            }
77          ]
78        })
79      }
80    ]
81  },
82  plugins: [
83    new VueLoaderPlugin(),
84    new ExtractTextPlugin('css/style.css'),
85    // new MiniCssExtractPlugin({filename: 'assets/css/style.css'}),
86  ],
87  devServer: {
88    open: true,
89    contentBase: path.join(__dirname, 'dist'),
90    watchContentBase: true,
91    port: 3000
92  }
93};
94

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>テスト</title>
8  <link rel="stylesheet" href="/css/style.css">
9</head>
10<body>
11  <div id="app"></div>
12  <script src="/assets/js/bundle.js"></script>
13</body>
14</html>

試したこと

webpack.config.jsonに

  watch: true
  watchOptions: {
    poll: true
  },

を追加した。体感的な変化なし。

dist内のbundle.jsをindex.htmlと同じ階層におくとうまくできたという記事をみて、それを試してみた。しかし、こちらも変化が感じられなかったので階層は戻した。

package.jsonにwatchコマンドを追加してみた。webpack-dev-serverは同時に立ち上げらなかった。

(もしかしたらこれはもともと一つのコマンドでやろうとせずにterminalを2つ用意してwebpackとnpm run start:dev、2つのコマンドを同時に実行するものなのかと思い始めているところです。。)

行動規範の内容に同意します

回答1件

自己解決

├── dist
│   ├── assets
│   │   ├── css
│   │   ├── img
│   │   └── js
│   └── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── app.js
│   ├── assets
│   │   ├── js
│   │   └── sass
│   ├── pages
│   │   ├── About.vue
│   │   └── Home.vue
│   └── router.js
└── webpack.config.js

上記のような階層で

webpack.config.js

js
1// const webpack = require('webpack');
2const VueLoaderPlugin = require('vue-loader/lib/plugin');
3const path = require('path');
4
5const ExtractTextPlugin = require('extract-text-webpack-plugin');
6
7const MODE = 'development';
8const enabledSourceMap = (MODE === 'development');
9
10
11module.exports = {
12  watch: true,
13  watchOptions: {
14    poll: true
15  },
16  mode: MODE,
17  entry: './src/app.js',
18  output: {
19    filename: './assets/js/bundle.js',
20    path: path.join(__dirname, './dist'),
21    publicPath: 'assets/'
22  },
23  module: {
24    rules: [
25      {
26        test: /.js$/,
27        exclude: /node_modules/,
28        use: [
29          {
30            loader: 'babel-loader',
31            options: {
32              presets: [['@babel/preset-env', { modules: false }]]
33            }
34          }
35        ]
36      },
37      {
38        enforce: 'pre',
39        test: /.js$/,
40        exclude: /node_modules/,
41        loader: 'eslint-loader'
42      },
43      {
44        test: /.vue$/,
45        loader: 'vue-loader'
46      },
47      {
48        test: /.scss$/,
49        use: ExtractTextPlugin.extract({
50          use:[
51            {
52              loader: 'css-loader',
53              options: {
54                url: false,
55                sourceMap: enabledSourceMap,
56                importLoaders: 2
57              }
58            },
59            {
60              loader: 'postcss-loader',
61              options: {
62                sourceMap: enabledSourceMap,
63                plugins: [
64                  require('autoprefixer')({grid: true})
65                ]
66              },
67            },
68            {
69              loader: 'sass-loader',
70              options: {
71                sourceMap: enabledSourceMap,
72              }
73            }
74          ]
75        })
76      }
77    ]
78  },
79  plugins: [
80    new VueLoaderPlugin(),
81    new ExtractTextPlugin('assets/css/style.css'),
82  ],
83  devServer: {
84    open: true,
85    inline: true,
86    contentBase: path.join(__dirname, './dist'),
87    publicPath: '/', // assetではなくルートを指定する
88    watchContentBase: true,
89    port: 3000
90  }
91};
92