利用HtmlWebpackPlugin動態(tài)注入編譯文件，output設置無用

學習網(wǎng)上的教程學習使用webpack打包項目，簡單的代碼實現(xiàn)。
界面入口文件index.html如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
  <div id="app">{{message}}</div>  <!-- Vue模板入口 -->
  <!-- <script src="dist/main.js"></script> -->
</body>
</html>

//main.js


import Vue  from 'vue'  
import Hello from './components/Hello.vue'

new Vue({
  el: '#app',
  template: '<div><hello></hello></div>', 
  components: {Hello}
})

// src/componets/Hello.vue

<template>
<div>{{message}}</div>
</template>

<script>
  export default {
/*    data: () => ({message: 'Hello Vue.js!'})
*/   
      data(){
          return {
              message:'Hello Vue.js!'
          }
      }
}
</script>

再看webpack.config/base.js

const path = require('path')
const root = path.resolve(__dirname, '..') // 指向 根目錄

module.exports = {
entry: path.join(root, 'src/main.js'),  // 項目入口文件
output: {
    path: path.join(root, 'dist'),  // 出口目錄
    filename: 'main.js'  // 出口文件名
},
resolve: {
   alias: { // 配置目錄別名，來確保模塊引入變得更簡單
     // 在任意目錄下require('components/example') 相當于require('項目根目錄/src/components/example')
     components: path.join(root, 'src/components'),
     views: path.join(root, 'src/views'),
     styles: path.join(root, 'src/styles'),
     store: path.join(root, 'src/store')
   },
   extensions: ['.js', '.vue']
}, 
   module: { // 配置loader
   rules: [
     {test: /\.vue$/, loader: 'vue-loader'}, // 所有.vue結(jié)尾的文件，使用vue-loader
     {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/} // .js文件使用babel-loader，切記排除node_modules目錄
    ]
   }
   

}

另外的dev.js

  const path = require('path')
  const webpack = require('webpack')
  const merge = require('webpack-merge')
  const baseConfig = require('./base')
  const root = path.resolve(__dirname, '..')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
      
  module.exports = merge(baseConfig, {
  entry: [
   'webpack/hot/dev-server', // 熱替換處理入口文件
    path.join(root, 'src/index.js')
  ],
  output: {
   path: path.join(root, 'dist'),  // 出口目錄
   filename: 'main.js',  // 出口文件名
  },
  devServer: {
  historyApiFallback: true, // 404的頁面會自動跳轉(zhuǎn)到/頁面
  inline: true, // 文件改變自動刷新頁面
  port: 3800, // 服務器端口  
  devtool: 'source-map',// 用于標記編譯后的文件與編譯前的文件對應位置，便于調(diào)試
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // 添加熱替換插件
    new HtmlWebpackPlugin({
    template: path.join(root, 'index.html'), // 模板文件
    inject: 'body' // js的script注入到body底部
    })
  ]
  })

最后package.json中的script腳本是這樣的：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config/dev.js"
  },

在終端輸入命令行運行：npm run dev，無報錯，但是打開3800端口發(fā)現(xiàn)，頁面未被正常渲染，查看后發(fā)現(xiàn)：
圖片描述

這個應該是由于輸出路徑?jīng)]有正確設置造成的，但是一直都沒有改好，各位大佬走過路過幫忙看看，非常謝謝了！

對了，另外還有一個情況就是，動態(tài)注入的方法編譯后的文件并沒有輸出到dist目錄下，根目錄下也沒有。編譯的提示信息如下：
圖片描述

回答

編輯回答

冷溫柔

又來自問自答，關于這個棘手的問題，一直到第二天才解決，一直忘了來更新答案。那天一開始的方向就走錯了，在上面的錯誤基礎上，通過去掉hello組件部分，直接實現(xiàn)頁面上的單個div塊，獲取vue.data中的數(shù)據(jù)，渲染修改message的值。編譯發(fā)現(xiàn)完全沒有錯，且并不是路徑設置的問題。至于下面的截圖，是因為后面動態(tài)注入時，編譯后的js文件是直接動態(tài)注入到index.html文件中去了，默認在統(tǒng)一路徑下。
不過有個地方確實有問題，就是dev.js那里的入口文件不是index.js而是main.js！改正后發(fā)現(xiàn)，可以正常運行。
根本原因是沒有將vue正確掛載，導致子組件hello.vue中不能識別到vue。
vue的掛載我還沒有找出錯誤的原因，后續(xù)解決后會更新的。

2018年3月14日 07:09