vue.js
vue-cli

vue-cliのindex.htmlをsrcに入れ込む

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.htmlsrc配下に移動しました。

├── README.md
├── build
├── config
├── node_modules
├── package.json
├── src
    └── index.html
└── static

この状態でnpm run dev(起動)すると、当然怒られます。(index.htmlないぞ!)

ng.png

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.jscontextとして./srcを追加し、entry.appからsrc/を外してみたところ、上手くいきました。

build/webpack.base.config.js
module.exports = {
  context: path.resolve('./src'),
  entry: {
    // app: './src/main.js'
    app: './main.js'
  },

ok.png

感想

とりあえず./src/index.htmlをテンプレートにして起動はできましたが、これがベストな手法なのかどうかは謎です。(詳しい方がいらっしゃったら教えてください...!)