vue-cliを使うと以下のようなディレクトリ構成で初期生成されます。
vue-cliの初期ディレクトリ構成
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package.json
├── src
└── static
ここで、Vue2のディレクトリ構成を考えるという記事によると、同じくvue-cliで始めているわけですが、index.htmlの位置が微妙に異なることに気が付きます。おや？
こちらが現在のディレクトリ構成になります。
規模が大きくなってきても耐えれる構成にしたいということを意識して考えました。
├── assets
├── dist
├── gulp
├── gulpfile.js
├── package.json
├── src
│ ├── App.vue
│ ├── components
│ │ └── Sample
│ │ └── globals
│ │ └── Header
│ ├── constants
│ │ └── constant.js
│ ├── index.html <-ココ！
以下略
初期状態は、直下にindex.htmlがあるにも関わらず、記事中ではsrc配下に移動しています！（確かにこのほうが良さそうな気はする）
src配下に移動してみる
以下のようにindex.htmlをsrc配下に移動しました。
├── README.md
├── build
├── config
├── node_modules
├── package.json
├── src
└── index.html
└── static
この状態でnpm run dev（起動）すると、当然怒られます。（index.htmlないぞ！）
Webpackのどこを弄ればいいのか
npm run devを実行すると、Webpackがいい感じにやってくれるわけですが、その際テンプレートとなるindex.htmlの位置をsrcの下にするにはどうすればいいのでしょうか。
webpack.dev.config.js【NG】
以下のtemplateという部分を変更してみましたが、何も変わりませんでした。。デフォルトの設定が勝っちゃう。。
参考:The template option
build/webpack.dev.config.js
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html',
inject: true
}),
webpack.base.config.js【OK】
そこで、以下のようにwebpack.base.config.jsにcontextとして./srcを追加し、entry.appからsrc/を外してみたところ、上手くいきました。
build/webpack.base.config.js
module.exports = {
context: path.resolve('./src'),
entry: {
// app: './src/main.js'
app: './main.js'
},
感想
とりあえず./src/index.htmlをテンプレートにして起動はできましたが、これがベストな手法なのかどうかは謎です。（詳しい方がいらっしゃったら教えてください...!）