webpack-dev-serverで開発サーバーを起動する
webpack-dev-serverで開発サーバーを起動します。
ファイルやフォルダ構成などの環境はvueファイル（単一ファイルコンポーネント）をwebpackでビルドで紹介したものと同様とします。
パッケージのインストール
webpack-dev-serverをインストールします。
$ npm install --save-dev webpack-dev-serverwebpack.config.jsの設定
webpack.config.jsにdevServerの設定を追記します。
webpack.config.jsconst webpack = require('webpack');
module.exports = {
entry: './resources/assets/js/app.js',
output: {
path: __dirname + '/public',
publicPath: '/',
filename: 'js/app.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
contentBase: __dirname + '/public',
publicPath: '/',
noInfo: true,
historyApiFallback: true
}
};scriptコマンドの設定
package.jsonのscriptsにwebpack-dev-serverを実行するコマンド（devとします）を追記します。
package.json// 一部抜粋
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack",
"dev": "webpack-dev-server --open"
},--openのオプションを設定するとwebpack-dev-serverを実行したときに自動でブラウザが起動します。必要ない場合は--openを削除します。
index.htmlの作成
vueファイル（単一ファイルコンポーネント）をwebpackでビルドでビルドしたapp.jsを読み込んで動作確認をするhtmlページを作成します。
publicフォルダの直下に作成します。
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<main id="app">
</main>
<script src="./js/app.js"></script>
</body>
</html>ここまでのフォルダ構成は以下になります。
- node_modules
- public
- js
- index.html
- resources
- assets
- js
- components
- App.vue
- app.js
- components
- js
- assets
- .babelrc
- package.json
- webpack.config.json
実行
npm run devを実行するとブラウザが起動して、localhost:8080が表示されるはずです。表示されない場合はlocalhost:8080にアクセスしてみてください。
vueファイル（単一ファイルコンポーネント）をwebpackでビルドでビルドしたapp.jsが読み込まれ、赤字でhello worldと表示されることを確認できます。