webpack配置vue组件加载器

前言
App.vue单文件组件代码

<template>
   <div>
       <h1>App根组件</h1>
   </div>
</template>

<script>
    // 这里定义vue组件的业务逻辑
    export default{
        //私有数据
        data(){
            return{}
        },
        methods:{//处理函数
            //其它业务处理
        }
    }
</script>
<style  scoped>
/* style  标签加上 scoped  可以防止样式之间冲突，每个子页面样式是私有的，不会影响到其他页面的组件 */

</style>

index.js中引入单文件组件

import $ from 'jquery'
import './css/at.css'
import './css/at.less'
import './css/at.scss'
// 导入vue单文件组件
import App from './components/App.vue'
$(function() {
  $('li:odd').css('backgroundColor', 'blue')
  $('li:even').css('backgroundColor', 'lightblue')
})
class User {
  static info = 'User类'
}
console.log(User.info);

执行打包 npm run start 命令 浏览器查看结果

可以 看出webpack不能打包vue后缀的文件，所以接下来进行配置

webpack配置vue组件加载器

• 第一步：安装 npm i vue-loader vue-template-compiler -D 命令
  
• 第二步：在webpack.config.js配置文件中，添加vue-loader的配置如下：

// 导入vue-loader
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    plugins:[htmlPlugin,new VueLoaderPlugin()],// plugins 数组是webpack 打包期间会用到的一些插件列表
    mode:'development', // mode用来指定构建模式
    //所有第三方文件模块的匹配规则
    module:{
       rules:[
            //配置vue组件
           {test:/\.vue$/,use:'vue-loader'}
       ]    
    }
  }

执行 打包 npm run start 命令 结果如下

可以看出，控制台就没有报错了