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() 
]
};

这样就跑起来了