利用HtmlWebpackPlugin動(dòng)態(tài)注入編譯文件，output設(shè)置無(wú)用

學(xué)習(xí)網(wǎng)上的教程學(xué)習(xí)使用webpack打包項(xiàng)目，簡(jiǎn)單的代碼實(shí)現(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'),  // 項(xiàng)目入口文件
output: {
    path: path.join(root, 'dist'),  // 出口目錄
    filename: 'main.js'  // 出口文件名
},
resolve: {
   alias: { // 配置目錄別名，來(lái)確保模塊引入變得更簡(jiǎn)單
     // 在任意目錄下require('components/example') 相當(dāng)于require('項(xiàng)目根目錄/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的頁(yè)面會(huì)自動(dòng)跳轉(zhuǎn)到/頁(yè)面
  inline: true, // 文件改變自動(dòng)刷新頁(yè)面
  port: 3800, // 服務(wù)器端口  
  devtool: 'source-map',// 用于標(biāo)記編譯后的文件與編譯前的文件對(duì)應(yīng)位置，便于調(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"
  },

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

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

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

回答

編輯回答

冷溫柔

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

2018年3月14日 07:09