webpack中引入.vue文件遇到的坑

執行完npm install vue vue-loader以後跑程序結果

根據錯誤的提示要一個vue-template-compile,因此我就安裝了一下
執行
npm install vue-template-compiler -D
結果

其中 <span>vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. <span>
錯誤中提示缺乏了一個插件，webpack config 中缺乏名爲 VueLoaderPlugin 的插件，意思就是 webpack的配置文件 webpack.config.js 中缺乏了 VueLoaderPlugin 插件，所以只須要添加這個插件就能夠了。

在添加之先引入插件：const VueLoaderPlugin = require("vue-loader/lib/plugin");

而後在 plugins 裏建立一個新的插件：plugins:[ new VueLoaderPlugin(); ]

var path = require('path');
var webpack=require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var VueLoaderPlugin = require("vue-loader/lib/plugin");


module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './bundle.js'
  },
  devServer:{
    contentBase:'./src',  //設置服務器訪問的基本目錄
    host:'localhost', //服務器的ip地址
    port:8080,  //端口
    open:true, //自動打開頁面
    hot: true
},
module:{
  rules:[
 
    {
      test:/\.css$/,
      use:['style-loader','css-loader']//引入的順序相當重要,不可改變
    },
    //語法轉化 exclude 除了什麼以外的轉化 不然很耗cpu內存
    {
      test:/\.js$/,
      exclude:/node_modules/,
      use:'babel-loader'
    },
        {//讓webpack識別vue模板
          test:/.vue$/,
          loader:'vue-loader'
      }
  ],
},
plugins:[
  new webpack.HotModuleReplacementPlugin(),
  new HtmlWebpackPlugin({
      template: path.join(__dirname,'./src/index.html'),
       //引用這個插件生成模板地址index.html;插件會自動生成html文件並將打包好的js插入文件
      filename:"index.html"
  }),
  new HtmlWebpackPlugin({
    template: path.join(__dirname,'./src/second.html'),
     //引用這個插件生成模板地址index.html;插件會自動生成html文件並將打包好的js插入文件
    filename:"second.html",
    //chunks:[],放入entry引入的js文件樣式
}),
new VueLoaderPlugin() 
]
};

這樣就跑起來了